🎉 daisyUI 5.0 upgrade guide

daisyUI blog

Updates, ideas and resources

How to update daisyUI from version 3 to version 4
Published last year by Pouya Saadeghi

How to update daisyUI from version 3 to version 4

This upgrade guide helps you easily update daisyUI to version 4 without breaking anything.

daisyUI 4 breaking changes

Since the launch of daisyUI 3 in July 2023, my focus has been on pushing the boundaries and enhancing the daisyUI experience. New features in CSS opened doors to new possibilities for daisyUI and now with the release of daisyUI 4, we can enjoy all the new features and improvements.

This latest release marks a huge leap forward in design, functionality, accessibility, and efficiency of daisyUI. For a detailed overview of the improvements, explore thedaisyUI changelogs page. But the most important thing for upgrading an existing project to a new major version is breaking changes. Here in this guide, we go step by step to update daisyUI from version 3 to version 4.

1. Update daisyUI package

First, you need to update the daisyUI package to the latest version. You can do this by running the following command in your terminal:

npm i -D daisyui@latest

2. daisyUI color variables

daisyUI 4 usesthe new OKLCH color systemunder the hood. That means all color CSS variables (like--p,--s, etc) now have OKLCH values instead of HSL values. (Read more about OKLCH)

  • If you use daisyUI colors with Tailwind CSS class names (likebg-primary) you don't have to do anything.
  • If you use the CSS variables directly in your project (like.myclass{ color: hsl(var(--p)) }) you need to use them with oklch function (like.myclass{ color: oklch(var(--p)) }) now.

Here's the primary color of light theme in daisyUI 3 and 4:

Before
After
/* the values were HSL */
--p: 251.47 100% 56%;
/* the values are OKLCH */
--p: 0.4912 0.3096 275.75;

So for using daisyUI color CSS variables directly inside your project, change the color functions fromhsl()tooklch()like this:

Before
After
/* Using hsl() function */
color: hsl(var(--p));
/* Using oklch() function */
color: oklch(var(--p));

3. All colors are removed*-focus3. All colors are removed

All*-focuscolors likeprimary-focuscolor in daisyUI 3 did was using the samebg-primarycolor with a darker shade. Now thanks to the newcolor-mix()CSS function we do the same dynamically and it gives us more control on the the colors. For example take a look at this amazing class name. It mixes primary color with black to make it 7% darker:

bg-[color-mix(in_oklab,oklch(var(--p)),black_7%)]
                   │              │       │
                   │              │       │
                   │              │       │
                   │              │       ╰── black with 7% opacity = 7% darker
                   │              │
                   │              ╰── primary color
                   │
                   ╰── OKLAB gives a better result

So if you used*-focuscolors in your project and you want the exact same result, you can use the newcolor-mix()function in arbitrary class names like this:

Before
After
class="bg-primary-focus"
class="bg-secondary-focus"
class="bg-accent-focus"
class="bg-neutral-focus"
class="bg-[color-mix(in_oklab,oklch(var(--p)),black_7%)]"
class="bg-[color-mix(in_oklab,oklch(var(--s)),black_7%)]"
class="bg-[color-mix(in_oklab,oklch(var(--a)),black_7%)]"
class="bg-[color-mix(in_oklab,oklch(var(--n)),black_7%)]"

4. Extending themes

There's a change in property names indaisyui/src/theming/themes.jsfile. If you're customizing built-in daisyUI themes, change it:

Before
After
daisyui: {
  themes: [
    {
      light: {
        ...require("daisyui/src/theming/themes")["[data-theme=light]"],
        primary: "blue",
      },
    },
  ],
},
daisyui: {
  themes: [
    {
      light: {
        ...require("daisyui/src/theming/themes")["light"],
        primary: "blue",
      },
    },
  ],
},

5. RTL

daisyUI 4 components uselogical CSS propertiesinstead of directional rules (mr-*,pl-*, etc). All components now support LTR/RTL in runtime without any config or plugin. You just need<html dir=rtl>and everything will be RTL on runtime. You can safely removertl: trueconfig andtailwindcss-flipplugin from your project (If you're using logical Tailwind CSS utility classes and you don't need the plugin for your own directional Tailwind CSS classes)

Before
After
module.exports = {
  //...
  plugins: [require("daisyui"), require("tailwindcss-flip")],
  daisyui: {
    rtl: true,
  },
}
module.exports = {
  //...
  plugins: [require("daisyui")],
  daisyui: {},
}

6. Tab

  • these modifier classes fortabare removed:
    • tab-lifted
    • tab-bordered
    • tab-lg
    • tab-md
    • tab-sm
    • tab-xs
  • Use the following modifier classes for the parenttabsclass instead:
    • tabs-lifted
    • tabs-bordered
    • tabs-lg
    • tabs-md
    • tabs-sm
    • tabs-xs
Before
After
<div class="tabs">
  <a class="tab tab-lg tab-lifted">Tab 1</a>
  <a class="tab tab-lg tab-lifted tab-active">Tab 2</a>
  <a class="tab tab-lg tab-lifted">Tab 3</a>
  <a class="tab tab-lg tab-lifted">Tab 4</a>
</div>
<div class="tabs tabs-lg tabs-lifted">
  <a class="tab">Tab 1</a>
  <a class="tab tab-active">Tab 2</a>
  <a class="tab">Tab 3</a>
  <a class="tab">Tab 4</a>
</div>

7. Button

Buttons are not uppercase by default anymore. You can adduppercaseclass if you want to make them uppercase.

Conclusion

That's it! You can now enjoy the new daisyUI 4features and improvementsin your project. If you have questions specific about the upgrade, ask it inthis GitHub discussionand if you found a bug, report it indaisyUI GitHub issues

I'm excited to see all the amazing things you'll build with daisyUI 4.

Tags: Guides

Don't miss new posts!

Subscribe to daisyUI blog newsletter to get updates on new posts.

You will only receive a single email when a new blog post is published. No spam. No ads.

Please upgrade your browser