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

[kuchta]

Pouya, I've noticed you are making amazing progress on the new version. Thank you for great work 🙏🏻❤️

[reidpat]

Has anyone had luck with the above method for importing daisyUI lately? I'm running into an issue with using "tailwindcss": "4.0.0-alpha.15" and "daisyui": "5.0.0-alpha.17"

Internal server error: [postcss] postcss-import: C:\Coding\animotion\node_modules.pnpm\daisyui@5.0.0-alpha.17\node_modules\daisyui\index.js:1:9: Unknown word
Plugin: vite:css
File: C:/Coding/animotion/node_modules/.pnpm/daisyui@5.0.0-alpha.17/node_modules/daisyui/index.js:1:8
1 | import {plugin} from 'daisyui/functions/plugin.js';

[reidpat]

Hmm okay, no longer getting an error on import, but also not seeing elements getting styled correctly.

[saadeghi]

@reidpat can you share a small project? If it works here it should work for you as well.

[reidpat]

This is the relevant part of the app.css

/* tailwind */
@import 'tailwindcss/theme';
@import 'tailwindcss/utilities';

/* @import "daisyui/dist/full.css"; */
@plugin "daisyui@5.0.0-alpha.18" {
  logs: true;
  themes: light --default, dark --prefersDark, cupcake;
}

"tailwindcss": "4.0.0-alpha.27"
"daisyui": "5.0.0-alpha.18",

Project works when I use the CDN import, or @import the full css.
Chances are it's my project that's being weird.

[saadeghi]

@reidpat I will try…
Both Tailwind 4 and daisyUI 5 are alpha for now, so there will be many bugs but all will be fixed until the stable version.

[kuchta]

It's working for me 👏🏻❤️

[robsontenorio]

@saadeghi The @plugin "daisyui@5.0.0-alpha.20"; does not work, but now @plugin "daisyui"; works... And it loads alpha.19 as you can see on Terminal at bottom.

[kuchta]

The code was probably generated before incrementing package.json version...