idea: Update to tailwind v4.1

[TreyWW]

How big is this feature?

Small

Describe the problem

Currently on 3.4.1 but v4 has new features which would be useful.

Describe a possible solution

npx @tailwindcss/upgrade should hopefully migrate most of it.

[TreyWW]

Main concern with this is that to get tailwind to upgrade, DaisyUI needs to play well with it too. DaisyUI seems to require a LOT of changes to upgrade to DaisyUI v5 https://daisyui.com/docs/upgrade/

[O-sama12]

Hi @TreyWW
Can I solve this issue by migrating the project from tailwind v3.4.1 to v4?
As per the docs, I have setup myself the project and I'm ready to contribute it.
With regards
@O-sama12

[TreyWW]

Hey @O-sama12

Yeah if tailwind v4 works sure happy to migrate to that. I did attempt it in the past though and it caused lots of issues with DaisyUI.

[O-sama12]

Hey @TreyWW,

I've forked the repository and completed the local setup successfully.

While reviewing the dependencies before starting the Tailwind migration, I noticed that DaisyUI appears in both devDependencies and dependencies with different version ranges:
``"devDependencies": {
"daisyui": "^4.9.0"
}

"dependencies": {
"daisyui": "^4.7.3"
}``

I also checked the latest DaisyUI release and saw that it's currently version 5.5.23.

Before I begin the migration, I'd like to clarify the intended scope of the task:

Should I focus only on upgrading Tailwind from v3.4.1 to v4?
Or should I also update DaisyUI (and potentially consolidate the duplicate dependency entries) if compatibility issues arise?

I noticed you mentioned encountering several issues when attempting the migration previously, so I wanted to confirm the expected approach before making changes.

Thanks!

[TreyWW]

If you can find a way to upgrade tailwind to v4 without doing daisyui updates, that would be ideal.

But if that's not possible we will need to look into DaisyUI V5, but I'd imagine there will be a lot of breaking changes

[O-sama12]

Good Afternoon

I investigated the Tailwind v4 migration on a fresh branch.

Current Findings:

• The Project builds correctly on Tailwind 3.4.1 and DaisyUI 4.9.0.
• I uograded my local environment to Node 20 and verified webpack and Tailwind builds are working.
• Running the official Tailwind v4 upgrade tool fails with:
  addUtilities({ '@media (min-width: 640px)' ... }) defines an invalid utility selector
• After temporarily disabling DaisyUI-relate configuration in tailwind.config.js, the upgrader proceeded further and reached its Git safety checks.

This suggests that the current DaisyUI/Tailwind configuration is likely blocking the official upgrade path.

Would you like me to continue with a manual Tailwind v4 migration attempt while keeping DaisyUI at v4, or would you prefer I stop here and document the incompatibility first?

Have a picture just in case:

[TreyWW]

https://daisyui.com/docs/upgrade/ seems to suggest first removing daisyui plugin from the tailwind.config.js

But there are still a lot of changes that are going to require manual action on the daisyui side.

Let me know if you have any luck after removing daisyui from the tailwind config

[O-sama12]

Good Afternoon
I removed the DaisyUI plugin/config from tailwind.config.js and reran the Tailwind v4 upgrader.

That got past the original addUtilities error, but the migration now fails on DaisyUI classes used in CSS:

.modal-responsive {
    @apply modal-bottom;
    @apply sm:modal-middle;
}

with:

Cannot apply unknown utility class `modal-bottom`

I also searched the templates and found fairly extensive DaisyUI usage (modal, modal-box, modal-action, modal-backdrop, modal-toggle, btn, etc.) across many files.

At this point it looks like DaisyUI is the primary blocker for the Tailwind v4 migration rather than Tailwind itself.