daisyui

Install daisyUI 5 with npm i -D daisyui@latest, then add @plugin "daisyui"; to your CSS file after @import "tailwindcss";. Tailwind CSS v4 does not use tailwind.config.js, and a CDN option is also available for no-build setups.

Add the component class plus optional modifier classes to an element, such as class="btn btn-primary" for a primary button. Components can be customized with Tailwind utility classes, and the default variant should be used unless a specific style is requested.

Yes, daisyUI 5 is a CSS library that works with any framework using Tailwind CSS 4, including React, Vue, SvelteKit, Next.js, Laravel, and Rails. Framework-specific install guides define the correct CSS entry file for each setup.

daisyUI adds semantic color names like primary, base-100, and base-content that change automatically with the active theme, so dark: variants are unnecessary. Themes are enabled in the plugin config and applied by setting data-theme on the html element or nested elements.

Tailwind colors like text-gray-800 stay fixed across themes, so text can become unreadable when a dark theme changes base-100 to a dark color. daisyUI semantic colors adapt per theme, keeping contrast correct automatically.

Yes, define a custom theme with the @plugin "daisyui/theme" block and set all required CSS variables such as --color-primary and --color-base-100 in OKLCH or hex. You can also override individual values of a built-in theme by reusing its name.