configuring with Tailwind v4 / Alpha

[kunanyi]

Has anyone managed to get this to work with the Tailwind Alpha?

I believe they are moving away from PostCSS?

https://tailwindcss.com/blog/tailwindcss-v4-alpha

The alpha has been out for a while so hoping someone has had more luck than me :)

[kunanyi]

Ah apologies there is actually a discussion already #2899

Bit sad the alpha doesn't have plugin architecture yet... hope they don't try to pin Catalyst on people

[saadeghi]

It's just alpha version for now. It's not ready for production yet.

[kunanyi]

naive question... is it possible to import daisyui as a traditional CSS file?

[saadeghi]

Yes, you can import the css file from node modules from daisyui/dist/full.css

But this css file includes every class name. Even the ones you're not using in your project. So you might want to use an external tool like postcss-purge to remove unused class names and create a smaller CSS file for production.

Let me know if you have any questions.

[kuchta]

Seems like v4.0.0-alpha.23 already supports plugins, but it doesn't work with daisyUI since it only support single-class selectors and daisyUI uses complex ones like media queries that will probably never be supported by the new version: tailwindlabs/tailwindcss#14114

I assume that changing daisyUI to use just single class selectors and nesting should also work in v3, right?

[saadeghi]

Yes. The latest alpha version recently added support for plugins 🥳

I'm already working on daisyUI 5 which is going to be compatible with Tailwind CSS 4.

I will also try my best to release an update on daisyUI 4 to make sure it works with Tailwind 3. Their suggested nesting solution should work 🫡

[kuchta]

Great to hear that. Thank you for your great work on this amazing library 🙏🏻❤️

[robsontenorio]

@saadeghi hey buddy!

I think we should have a side note on docs explaining how to try daisyUI alpha/beta. What do you think?

I am looking forward it to try with maryUI.

[saadeghi]

It's too soon for publish yet.
Only a few components have been rewritten. I’ll write a blog post once all the components are added.

But if you can't wait, install Tailwind CSS alpha
Then npm i -D daisyui@alpha and add @import "daisyui"; to the CSS file.
It has button, checkbox, toggle, radio, etc. I'm working on it and I will try my best to avoid unnecessary breaking changes.

[robsontenorio]

@saadeghi Ok, I am ready 😄
robsontenorio/mary#623