If you’ve worked with Tailwind CSS, chances are you’ve used daisyUI. As one of the most popular Tailwind component libraries, it’s valued for its sensible defaults, wide component set, and flexibility that feels native to Tailwind.
Now, with the release of Tailwind CSS 4, the ecosystem is evolving — and daisyUI is keeping pace. Version 5 is more than an update: it’s a complete rewrite built to be smaller, faster, and more customizable.
In this guide, we’ll take a hands-on look at what’s new in daisyUI 5. You’ll see how to migrate a component from v4 to v5, apply the new theming engine, and experiment with fresh components and modifiers along the way.
Core upgrade for performance and a modern build
Before diving into the new components and themes, it’s worth noting that most of the real changes in daisyUI 5 happen under the hood. The library has been completely re-engineered to run faster, stay lighter, and play nicely with modern web standards.
A faster, lighter library
Performance got a serious upgrade in daisyUI 5. Here are the numbers that matter:
- Zero dependencies: This is a huge win. daisyUI 5 has completely eliminated all third-party dependencies. For you, this means a much cleaner
node_modulesdirectory, fasternpm installtimes, and a significantly smaller security attack surface. - 61% smaller package size: The npm package has shrunk from 4.7 MB down to just 1.8 MB. This directly contributes to quicker project setup and less disk space usage.
- 75% smaller CDN file: The all-inclusive CSS file, which was previously
full.css, is nowdaisyui.cssand has been reduced from 137 kB (compressed) to a tiny 34 kB. This makes using the CDN file directly in production a genuinely viable and efficient option, especially for projects without a build step.
Adopting modern CSS
These performance gains were made possible by embracing modern CSS features and the power of Tailwind CSS 4.
- Native CSS nesting: With CSS Nesting now supported across major browsers, daisyUI 5 uses it extensively. This avoids the duplicated selectors common with older preprocessors, producing a smaller, more efficient stylesheet.
color-mix()for opacity: Thanks to Tailwind 4, daisyUI no longer relies on hacks to handle color opacity. It now uses the nativecolor-mix()function, which is both more efficient and enables clearer, more flexible color variables (we’ll explore these in the theming section).
How to ugprade a component: daisyUI v4 to v5
The best way to see what’s new in daisyUI 5 is to upgrade a real component. In this section, we’ll start with a simple UI element built in daisyUI 4 and walk through the process of bringing it over to v5. Along the way, we’ll look at changes in configuration, class names, and theme variables.
How to set up a daisyUI 4 Project
First, let’s create a minimal starting environment. This ensures we’re all on the same page before the migration begins.
- Create a new project folder and initialize it.
mkdir daisyui-migration-guide cd daisyui-migration-guide npm init -y
- Install Tailwind CSS v3 and daisyUI v4.npm install -D tailwindcss@3 postcss autoprefixer daisyui@4
- Create the necessary configuration files.npx tailwindcss init -p
- Configure Tailwind to use daisyUI 4. Replace the contents of
tailwind.config.jswith the following:// tailwind.config.js /* @type {import('tailwindcss').Config} */ module.exports = { content: ["./.html"], theme: { extend: {}, }, plugins: [require("daisyui")], } - Create your main CSS file. Create a file named
input.cssand add the Tailwind directives:/* input.css */ @tailwind base; @tailwind components; @tailwind utilities;
- Finally, create an
index.htmlfile. This is where our component will live.
Our starting point: A daisyUI 4 component
Now, let’s add our simple component to index.html. It’s a card containing a title, two input fields and two button elements wrapped in a form-control.
Add this HTML inside the <body> tag of your index.html file:
<div class="card w-full max-w-lg text-white shadow-xl card-compact bg-gray-900">
<div class="card-body">
<h2 class="card-title text-white">Profile Settings</h2>
<div class="form-control w-full">
<label class="label">
<span class="label-text text-gray-300">Username</span>
</label>
<input
type="text"
placeholder="ikeh-ossai"
class="input input-bordered w-full bg-gray-700 border-gray-600 text-white placeholder-gray-400"
/>
</div>
<div class="form-control w-full mt-4">
<label class="label">
<span class="label-text text-gray-300">Email Address</span>
</label>
<input
type="email"
placeholder="ikeh@example.com"
class="input input-bordered w-full bg-gray-700 border-gray-600 text-white placeholder-gray-400"
/>
</div>
<div class="card-actions justify-end mt-6">
<button class="btn btn-ghost">Cancel</button>
<button class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
To see our component, run the Tailwind CLI to build the CSS:
npx tailwindcss -i ./input.css -o ./dist/output.css --watch
Now, open index.html. You will see a larger, more professional-looking dark settings panel centered on the white background.
With our starting point established, let’s begin the migration.
Step 1: Upgrade packages and change the config
First, stop theTailwind watcher (Ctrl+C), and run the following command to upgrade your packages, which now includes the standalone CLI for Tailwind v4.
npm install -D tailwindcss@latest @tailwindcss/cli@latest daisyui@latest
The biggest configuration change in daisyUI 5 is that it’s now configured directly in your CSS file, not tailwind.config.js.
Previously in daisyUI 4, your tailwind.config.js looked like this, using a JavaScript require:
// tailwind.config.js
module.exports = {
// ...
plugins: [require("daisyui")],
}
Now, in daisyUI 5, remove the plugins array from your tailwind.config.js. It can now be simplified or even be an empty file if you have no other configurations.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.html"],
theme: {
extend: {},
},
// The plugins array is now empty
plugins: [],
}
Add the daisyUI plugin directly to your input.css file.
/* input.css */ @import "tailwindcss"; @plugin "daisyui"; /* <-- Add this line */ @tailwind base; @tailwind components; @tailwind utilities;
Re-run the build command. Your component will still look largely the same, but it’s now running on the new version. The next step is to update the daisyUI-specific class names to match the new conventions
Step 2: Handle updating class name changes
Let’s upgrade our component’s styling by updating the class names.
card-compactis nowcard-sm: The sizing modifiers have been standardized for better consistency.form-controlis removed: The genericform-controlwrapper has been replaced by the new, more semanticfieldsetandlabelcomponents, which improve accessibility.
Here is the updated HTML for index.html. We’ll keep the hardcoded Tailwind color classes for now.
<div class="card w-full max-w-lg text-white shadow-xl card-sm bg-gray-900">
<div class="card-body">
<h2 class="card-title text-white">Profile Settings</h2>
<fieldset class="form-control w-full">
<label class="label">
<span class="label-text text-gray-300">Username</span>
</label>
<input
type="text"
placeholder="ikeh-ossai"
class="input input-bordered w-full bg-gray-700 border-gray-600 text-white placeholder-gray-400"
/>
</fieldset>
<fieldset class="form-control w-full mt-4">
<label class="label">
<span class="label-text text-gray-300">Email Address</span>
</label>
<input
type="email"
placeholder="ikeh@example.com"
class="input input-bordered w-full bg-gray-700 border-gray-600 text-white placeholder-gray-400"
/>
</fieldset>
<div class="card-actions justify-end mt-6">
<button class="btn btn-ghost">Cancel</button>
<button class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
Your component should now be visually identical to its original appearance.
Step 3: Updating theme variables
Let’s imagine our daisyUI 4 project had a custom theme defined in tailwind.config.js.
With daisyUI 4, the theme config used variable names like --p for primary and --b1 for base-100.
// tailwind.config.js (old)
module.exports = {
// ...
plugins: [require("daisyui")],
daisyui: {
themes: [
{
mytheme: {
/* custom definitions */
},
},
],
},
}
Now, with daisyUI 5, custom themes are also defined in your CSS file using the new @plugin "daisyui/theme" syntax and readable variable names.
First, update your tailwind.config.js to reference your theme name:
// tailwind.config.js (new)
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.html"],
theme: {
extend: {},
},
plugins: [],
}
Now, define the theme in your input.css. The following code uses the new CSS variables plus the oklch function to define the colors from a color palette:
/* input.css */
@import "tailwindcss";
@plugin "daisyui";
/* Define your new custom theme */
@plugin "daisyui/theme" {
name: "mytheme";
default: false;
prefersdark: false;
color-scheme: "light";
--color-primary: oklch(84.19% 0.16 88.33);
--color-primary-content: oklch(29.23% 0.03 27.42);
--color-base-100: oklch(56.78% 0.13 162.24);
--color-base-200: oklch(95.8% 0.02 46.22);
--color-base-300: oklch(96.88% 0.02 46.21);
--color-base-content: oklch(100% 0 0);
--color-accent: oklch(62.13% 0.28 17.56);
--color-neutral: oklch(62.13% 0.28 17.56);
}
@tailwind base;
@tailwind components;
@tailwind utilities;
This new approach is not only cleaner but also makes your color variables far more explicit and easier to debug directly in the browser’s developer tools.
Now that the theme is defined, you can remove the hardcoded color classes from the HTML and add data-theme="mytheme" to the <html> tag. The component will look like:
Supercharging your UI with the new Theming Engine
Now that our component is migrated and using a custom theme, we can explore the most exciting part of daisyUI 5: the powerful new theming engine. It goes far beyond just colors, giving you deep control over the entire design system.
The new Theme Generator
The easiest way to start is with the all-new Theme Generator. This is an official visual tool that lets you create, preview, and export complete themes in real-time. You can generate a palette from a single color, fine-tune every variable, and see how your changes affect all the components at once. It’s an indispensable tool for quickly creating a custom design system foundation.
More customization by adjusting size and shape
Let’s use our migrated settings panel to customize some non-color aspects. daisyUI 5 exposes new CSS variables to control things like border radius and border widths.
We can edit our @plugin "daisyui/theme" block in input.css to make our inputs and buttons more rounded and give the inputs a thicker border.
/* input.css */
@plugin "daisyui/theme" {
name: "mytheme";
color-scheme: "light";
/* ... your color variables ... */
--color-primary: oklch(84.19% 0.16 88.33);
--color-base-100: oklch(56.78% 0.13 162.24);
/* ... etc ... */
/* Add new variables for shape and size */
--radius-field: 0.5rem; /* Controls radius for inputs, buttons, etc. */
--border: 2px; /* Controls the base border width */
}
After saving, the inputs and buttons in our settings panel will now have a more pronounced, rounded look with a thicker border on the inputs.
Adding new effects with depth and texture
daisyUI 5 also introduces two new global “effect” variables that can add a subtle, premium feel to your components.
--depth: Adds a soft, 3D-like depth effect to elements like buttons.--noise: Applies a subtle, textured noise pattern to component backgrounds.
Let’s enable them in our theme:
/* input.css */
@plugin "daisyui/theme" {
name: "mytheme",
color-scheme: "light";
/* ... your color and shape variables ... */
--radius-field: 0.5rem;
--border: 2px;
/* Add the new effect variables */
--depth: 1; /* Enable the depth effect (0 is off, 1 is on) */
--noise: 0.1; /* Add a 10% noise overlay */
}
With these changes, your components will now have a subtle visual texture and a clean depth effect, making the design feel more tactile and refined.
Building with new features
Now that we have a fully migrated and themed component, let’s enhance its functionality and design by incorporating some of the brand-new components and style modifiers introduced in daisyUI 5.
The use case
Our “Profile Settings” card is a good start, but we can make it more functional. We’ll transform it into a more complete user settings panel by adding a validation message, a list of user preferences, and updating the button styles.
New components in action
daisyUI 5 introduces several new components. Let’s integrate two of them: Validator and List.
- Using
Validatorfor Form feedback:
The newValidatorcomponent is a simple wrapper that allows you to showsuccessorerrorstates on your form fields. Let’s add it to our “Username” field to show a success message.Wrap thefieldsetfor the username in adivwith thevalidatorandsuccessclasses, and add aspanwith thehintclass for the message.
Username is available
- Using
Listfor user preferences:
TheListcomponent is perfect for displaying vertical rows of information. Let’s add a list to our panel for managing user preferences.Add the following HTML just before thecard-actionsdiv. It includes alistwith twolist-rowitems, one of which contains atoggle.- Dark Mode
- Email Notifications
Enabled
- Dark Mode
New modifiers: soft and dash
daisyUI 5 adds new style modifiers for many components, including buttons. Let’s apply the new **btn-soft** and **btn-dash** styles to our action buttons for a different look.
Update the card-actions div in your HTML:
<div class="card-actions justify-end mt-6"> <button class="btn btn-ghost btn-dash">Cancel</button> <button class="btn btn-primary btn-soft">Save Changes</button> </div>
With these additions, our simple settings panel is now more functional and visually diverse, showcasing the new tools available in daisyUI 5.
Conclusion
We’ve walked through the most impactful changes in daisyUI 5, from its re-engineered core to its enhanced design system. By migrating an existing component, we’ve seen firsthand how this update is more than just a collection of new features; it’s a fundamental modernization of the entire library.
The key benefits are clear, daisyUI 5 is significantly faster and lighter thanks to its zero-dependency architecture and adoption of modern CSS. It’s far more customizable, with a powerful and intuitive new theming engine that gives developers deep control over their design system. Most importantly, it’s perfectly aligned with Tailwind CSS 4, ensuring its place as a forward-looking tool in the modern web development landscape.
For the massive community of daisyUI users, this version is an essential upgrade that brings tangible performance and workflow improvements. For any developer in the Tailwind ecosystem, daisyUI 5 solidifies its position as the most powerful, flexible, and well-designed component library available today.
