Migrating to Tailwind CSS v4

Published Date: Apr 2025

Tutorial

This is actually my personal notes when I was migrating to Tailwind CSS v4 in my Next.js project. I thought it would be useful to share it with you too.

Introduction

My current personal web is using daisyUI and Tailwind CSS as the main CSS utility tool and component library. I have been using Tailwind CSS for a while now, and I really like it. However, I have been using an older version of Tailwind CSS, and I decided to upgrade to the latest version, which is Tailwind CSS v4.

However, there's additional steps that you need to be aware of when migrating to Tailwind CSS v4. In this article, I will share my experience and the steps I took to migrate to Tailwind CSS v4 in my Next.js project along with daisyUI.

Steps to Migrate

Update Tailwind CSS

Before you going further, open your or and remove the daisyUI plugin from the array. This will enable Tailwind CSS upgrade tool can run safely.

Run the official Tailwind CSS upgrade tool:

Update daisyUI version

Now you can install daisyUI 5 which is the newest version of daisyUI. You can do this by running the following command:

Adjust and add daisy UI in your global CSS file. In my case, I updated my file to include daisyUI and additonal custom styles. And also take notes, you can add the directive to add daisyUI plugin in your file and some additional custom themes.

Now it's up to you to add the daisyUI themes that you want to use. You can do this by adding the property in your file. In my case, I added the and themes. Re-check your web styling in every changes you made. I can't guarantee that everything will work as expected, but at least you can see the changes and fix them one by one.

Conclusion

That's it. Seems easy but it depends how complex your project is. Especially when you're using additional plugins or custom themes. There's a lot of major changes both in Tailwind 4 and daisyUI. You need to check it by your own one by one even you can just run the upgrade tool in one line terminal command. I hope this article helps you to migrate to Tailwind CSS v4 in your Next.js project along with daisyUI.

If you have any questions or suggestions, feel free to leave a comment below.

You can check my own Tailwind 4 migration here in my Pull Request.

References

Back to Blog List Page

Introduction

Update daisyUI version

Now you can install daisyUI 5 which is the newest version of daisyUI. You can do this by running the following command:

Adjust and add daisy UI in your global CSS file. In my case, I updated my file to include daisyUI and additonal custom styles. And also take notes, you can add the directive to add daisyUI plugin in your file and some additional custom themes.

Now it's up to you to add the daisyUI themes that you want to use. You can do this by adding the property in your file. In my case, I added the and themes. Re-check your web styling in every changes you made. I can't guarantee that everything will work as expected, but at least you can see the changes and fix them one by one.

Conclusion

If you have any questions or suggestions, feel free to leave a comment below.

You can check my own Tailwind 4 migration here in my Pull Request.