Instalar daisyUI 5
- Debes usar Tailwind CSS 4 con daisyUI 5.
- El archivo
tailwind.config.jsestá obsoleto en Tailwind CSS v4. No usestailwind.config.js. Si Tailwind CSS v4 es una dependencia de Node.js, agrega solo@import "tailwindcss";al archivo CSS. - Para instalar daisyUI 5, ejecuta
npm i -D daisyui@latest. Luego, agrega@plugin "daisyui";al archivo CSS. - Instala daisyUI como dependencia cuando sea posible. Si tienes una razón específica para usar un CDN, usa los archivos CDN de Tailwind CSS y 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>
- Si Tailwind CSS y daisyUI son dependencias de Node.js, usa este archivo CSS:
@import "tailwindcss";
@plugin "daisyui";
CDN
Para una configuración en el navegador sin instalación, carga el CSS precompilado de daisyUI y la compilación del navegador de 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>
El archivo CDN principal incluye los temas claro y oscuro. Para cargar todos los temas integrados, usa:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
También puedes combinar módulos CSS de daisyUI por separado desde el CDN. Los archivos CDN no incluyen las variantes is-drawer-open: y is-drawer-close:.
Configuración independiente y específica del framework
- Si usas el ejecutable independiente de Tailwind CSS sin Node.js, sigue la guía independiente.
- Para otras instalaciones, selecciona la guía correspondiente al framework o herramienta de compilación: 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, o Zola.
Usa las rutas de archivo y los pasos de integración de la guía seleccionada. Cada framework puede usar un punto de entrada CSS diferente.