papopporking-oss/opencode-nextjs-standard

daisyUI 5 설치

설치 가이드

1. daisyUI 5는 반드시 Tailwind CSS 4와 함께 사용해야 합니다.
2. Tailwind CSS v4에서 tailwind.config.js 파일은 더 이상 사용되지 않습니다. tailwind.config.js를 사용하지 마세요. Tailwind CSS v4가 Node.js 의존성인 경우, CSS 파일에 @import "tailwindcss";만 추가하세요.
3. daisyUI 5를 설치하려면 npm i -D daisyui@latest를 실행하세요. 그런 다음 CSS 파일에 @plugin "daisyui";를 추가하세요.
4. 가능하면 daisyUI를 의존성으로 설치하세요. CDN을 사용해야 하는 특별한 이유가 있다면, Tailwind CSS와 daisyUI CDN 파일을 사용하세요:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

5. Tailwind CSS와 daisyUI가 Node.js 의존성인 경우, 다음 CSS 파일을 사용하세요:

@import "tailwindcss";
@plugin "daisyui";

CDN

설치 없이 브라우저에서 바로 사용하려면, 사전 컴파일된 daisyUI CSS와 Tailwind 브라우저 빌드를 로드하세요:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

기본 CDN 파일은 라이트 테마와 다크 테마를 포함합니다. 모든 내장 테마를 로드하려면 다음을 사용하세요:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />

CDN에서 개별 daisyUI CSS 모듈을 결합할 수도 있습니다. CDN 파일은 is-drawer-open: 및 is-drawer-close: 변형을 포함하지 않습니다.

독립 실행형 및 프레임워크별 설정

• Node.js 없이 Tailwind CSS 독립 실행형 실행 파일을 사용하는 경우, 독립 실행형 가이드를 참조하세요.
• 다른 설치의 경우, 해당 프레임워크 또는 빌드 도구에 맞는 가이드를 선택하세요: 11ty, Angular, Astro, Bun, Tailwind CLI, Dioxus, Django, Electron, Elysia, Ember, Fresh, HTMX, Laravel, Lit, Next.js, Nuxt, Phoenix, PostCSS, Preact, Qwik, Rails, React, React Router, Rsbuild, Solid, SolidStart, SvelteKit, UnoCSS, Vike, Vite, Vue, Waku, WordPress, Yew, Zola.

선택한 가이드의 파일 경로와 통합 단계를 따르세요. 각 프레임워크는 서로 다른 CSS 진입점을 사용할 수 있습니다.