daisyUI 5 upgrade guide

This guide helps you how to update your project to Tailwind CSS 4 and daisyUI 5.

Before upgrading your project, read about:
1 -Tailwind CSS 4 breaking changes
2 -daisyUI 5 release notes
3 -daisyUI 5 breaking changes

1. Update Tailwind CSS

Tailwind CSS provides a CLI tool for automatic upgrade. It automatically applies the new Tailwind CSS changes to your project.

1. First, remove daisyUI and plugins from yourtailwind.config.jsfile, so Tailwind CSS upgrade tool can safely replace it with the CSS file.

module.exports = {
   content: ['./your-files/**/*.{html,js}'],
   // other stuff...
-  daisyui: {
-    themes: ['light', 'dark', 'cupcake'],
-  },
- plugins: [require("daisyui")],
}

2. Run theofficial Tailwind CSS upgrade tool:

npx @tailwindcss/upgrade

2. Update daisyUI

1. Install daisyUI 5

npm i -D daisyui@latest

3. Add daisyUI to your CSS file

@import "tailwindcss";
@plugin "daisyui";

OR if you wantenable a built-in themeinconfig:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

Now everything should work as expected. If you're facing any challenges, you can ask for help ondaisyUI Discord serverso you can get help from the community.

Changes from v4

These are all the HTML changes from daisyUI 4 to 5. There are ~15 changes in total but you won't need to do all of them, only the ones you're using.

• To read about new features in daisyUI 5 go torelease notes page
• For more detailed changelog go tochangelogs page

Artboard

• Removed allartboardandphone-*classes. These classes were simply setting the width and height of the div. Use Tailwind CSSw-*andh-*classes instead.

Example:

- <div class="artboard phone-1">
+ <div class="w-[320px] h-[568px]">

Avatar

• Renamedonlineclass toavatar-online,offlinetoavatar-offline, andplaceholdertoavatar-placeholder.

- <div class="avatar online">
+ <div class="avatar avatar-online">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

- <div class="avatar offline">
+ <div class="avatar avatar-offline">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

Bottom Navigation

• Removedbottom-navcomponent. Usedockcomponent instead.
• Removedbtm-nav-xs,btm-nav-sm,btm-nav-md,btm-nav-lg. Usedock-xs,dock-sm,dock-md,dock-lginstead.
• Removedbtm-nav-active. Usedock-activeinstead.
• Removeddisabledclass ofbottom-nav. Usearia-disabled="true"attribute ordisabledattribute if it's a button. This is for better accessibility.

- <div class="btm-nav btm-nav-sm">
+ <div class="dock dock-sm">
  <button>🏠</button>
-   <button class="active">🍿</button>
+   <button class="dock-active">🍿</button>
  <button>⚙️</button>
</div>

Card

• card-borderedis renamed tocard-border.

- <div class="card card-bordered">
+ <div class="card card-border">

• Removedcard-compact. Usecard-sminstead.

- <div class="card card-compact">
+ <div class="card card-sm">

FileInput

• File input now has border by default. Usefile-input-ghostif you want to remove the border.
• Removedfile-input-bordered. File input has a border by default now. Usefile-input-ghostif you want to remove the border.

- <input type="file" class="file-input file-input-bordered">
+ <input type="file" class="file-input">

Footer

• Footer is now vertical by default. Usefooter-horizontalto make it horizontal at the screen size you want.

- <footer class="footer">
+ <footer class="footer md:footer-horizontal">

Input

• Input now has a default width of 20rem, no need for addingw-full max-w-xs.
• Removedinput-border.Input has a border by default now. Useinput-ghostif you want to remove the border.
• Removedinput-borderedclass (not needed anymore).

<!-- Input with border -->
<input class="input input-bordered"/>

<!-- Input without border -->
<input class="input"/>

<!-- Input with 20rem width -->
<input class="input w-full max-w-xs"/>

<!-- Input with border -->
<input class="input"/>

<!-- Input without border -->
<input class="input input-ghost"/>

<!-- Input with consistent width -->
<input class="input"/>

Label

• Label has been refactored to be more compatible with form elements. Seelabel docsfor more information.

Mask

• Removedmask-parallelogram,mask-parallelogram-2,mask-parallelogram-3, andmask-parallelogram-4. These mask styles are no longer included in the library. If you need them,manually use the CSS

Menu

• vertical menu is notw-fullanymore. Usew-fullif you want it to be full width.
• Renameddisabledclass of menu item tomenu-disabled.
• Renamedactiveclass of menu item tomenu-active.
• Renamedfocusclass of menu item tomenu-focus.

- <ul class="menu">
+ <ul class="menu w-full">

-   <li class="disabled"><a>disabled item</a></li>
+   <li class="menu-disabled"><a>disabled item</a></li>

-   <li class="active"><a>active item</a></li>
+   <li class="menu-active"><a>active item</a></li>

-   <li class="focus"><a>focus item</a></li>
+   <li class="menu-focus"><a>focus item</a></li>
</ul>

Mockup

• Renamecameraclass in mockup-phone tomockup-phone-camera.
• Renamedisplayclass in mockup-phone tomockup-phone-display.
• mockup-phone-display

<div class="mockup-phone">
-  <div class="camera"></div>
+  <div class="mockup-phone-camera"></div>

-    <div class="display">
+    <div class="mockup-phone-display">

-    <div class="artboard artboard-demo phone-1">Hi.</div>
+    <div class="w-[320px] h-[568px]">Hi.</div>
  </div>
</div>

Select

• Select now has a default width of 20rem, no need for addingw-full max-w-xs.max-w-noneclass.

• Removedselect-border. Select has a border by default now. Useselect-ghostif you want to remove the border.

<!-- Select with border -->
<select class="select select-bordered">

<!-- Select without border -->
<select class="select">

<!-- Select with consistent width -->
<select class="select w-full max-w-xs">

<!-- Select with border -->
<select class="select">

<!-- Select without border -->
<select class="select select-ghost">

<!-- Select with consistent width -->
<select class="select">

Stack

• Instead of setting the width and height of the stack items, use width and height for the stack itself.

- <div class="stack">
-   <div class="card bg-base-100 w-36 h-36">Text</div>
-   <div class="card bg-base-100 w-36 h-36">Text</div>
-   <div class="card bg-base-100 w-36 h-36">Text</div>
+ <div class="stack w-36 h-32">
+   <div class="card bg-base-100">Text</div>
+   <div class="card bg-base-100">Text</div>
+   <div class="card bg-base-100">Text</div>
</div>

Stat

• statsbackground color is now transparent. Usebg-base-100if you need a background color.

Tab

• Renamedtabs-liftedtotabs-lift.

- <div class="tabs tabs-lifted">
+ <div class="tabs tabs-lift">

Table

• Removedhoverclass. Usehover:bg-base-300(or any other color) instead.

- <tr class="hover">
+ <tr class="hover:bg-base-300">

Textarea

• Removedtextarea-border. Textarea has a border by default now. Usetextarea-ghostif you want to remove the border.

Other removals

• Remove form-control, label-text, label-text-alt

You can still use the same HTML still, but class names don't exist anymore and won't apply color, font-size, flex, etc.
I suggest using the newly added class names forfieldsetandlegendelements for better accessibility.

<label class="form-control w-full max-w-xs">
  Login
  <div class="label">
    <span class="label-text">Name</span>
  </div>
  <input class="input" placeholder="Name" />
</label>

<fieldset class="fieldset">
  <legend>Login</legend>
  <label class="label" for="name">Name</label>
  <input id="name" class="input" placeholder="Name" />
</fieldset>

<label class="form-control w-full max-w-xs">
  <div class="label">
    <span class="label-text">What is your name?</span>
    <span class="label-text-alt">Top Right label</span>
  </div>
  <input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
  <div class="label">
    <span class="label-text-alt">Bottom Left label</span>
    <span class="label-text-alt">Bottom Right label</span>
  </div>
</label>

<fieldset class="fieldset max-w-xs">
  <label class="label flex justify-between" for="name">
    <span>What is your name?</span>
    <span>Top Right label</span>
  </label>
  <input id="name" class="input" placeholder="Name" />
  <label class="label flex justify-between" for="name">
    <span>Bottom Left label</span>
    <span>Bottom Right label</span>
  </label>
</fieldset>

• Remove btn-group and input-group

btn-group, input-group were deprecated a year ago and now finally removed.
If you've been using btn-group or input-group, you can usejoininstead

<div class="btn-group">
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
</div>

<div class="join">
  <button class="btn join-item">Button 1</button>
  <button class="btn join-item">Button 2</button>
</div>

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details