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 the daisyUI 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 uses the new OKLCH color system under 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 (like bg-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 from hsl() to oklch() like this:

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

3. All *-focus colors are removed

All *-focus colors like primary-focus color in daisyUI 3 did was using the same bg-primary color with a darker shade. Now thanks to the new color-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 *-focus colors in your project and you want the exact same result, you can use the new color-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 in daisyui/src/theming/themes.js file. 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 use logical CSS properties instead 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 remove rtl: true config and tailwindcss-flip plugin 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 for tab are removed:
    • tab-lifted
    • tab-bordered
    • tab-lg
    • tab-md
    • tab-sm
    • tab-xs
  • Use the following modifier classes for the parent tabs class 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 add uppercase class if you want to make them uppercase.

Conclusion

That’s it! You can now enjoy the new daisyUI 4 features and improvements in your project. If you have questions specific about the upgrade, ask it in this GitHub discussion and if you found a bug, report it in daisyUI 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