papopporking-oss/opencode-nextjs-standard

Instalar daisyUI 5

Guia de instalação

1. Você deve usar Tailwind CSS 4 com daisyUI 5.
2. O arquivo tailwind.config.js está obsoleto no Tailwind CSS v4. Não use tailwind.config.js. Se o Tailwind CSS v4 for uma dependência Node.js, adicione apenas @import "tailwindcss"; ao arquivo CSS.
3. Para instalar o daisyUI 5, execute npm i -D daisyui@latest. Em seguida, adicione @plugin "daisyui"; ao arquivo CSS.
4. Instale o daisyUI como dependência sempre que possível. Se tiver um motivo específico para usar um CDN, use os arquivos CDN do Tailwind CSS e do daisyUI:

<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. Se o Tailwind CSS e o daisyUI forem dependências Node.js, use este arquivo CSS:

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

CDN

Para uma configuração de navegador sem instalação, carregue o CSS pré-compilado do daisyUI e a build de navegador do 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>

O arquivo CDN principal inclui os temas claro e escuro. Para carregar todos os temas embutidos, use:

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

Você também pode combinar módulos CSS separados do daisyUI vindos do CDN. Os arquivos CDN não incluem as variantes is-drawer-open: e is-drawer-close:.

Configuração standalone e específica para frameworks

• Se você usa o executável standalone do Tailwind CSS sem Node.js, consulte o guia standalone.
• Para outras instalações, selecione o guia para o framework ou ferramenta de build aplicável: 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, ou Zola.

Use os caminhos de arquivo e as etapas de integração do guia selecionado. Cada framework pode usar uma entrada CSS diferente.