Tailwind v4

[kuchta]

Hi guys,

I'm very excited about new Tailwind v4 developments and since I know there's no supports for plugins yet, do you think daisyui could be implemented with just the new "css-first" approach without using it as a plugin?

[saadeghi]

It's mentioned in the blog that plugins will be supported in the stable release (using the config file)

I'm also excited about getting rid of JS config file.
Hopefully importing plugins will also be possible using the CSS file. It will be great for daisyUI because daisyUI source files are CSS but I have to convert them all to CSS in JS during build time just so it can be imported in the JS file.

[kuchta]

Well, the problem with closed discussions is that they are not shown at the main page, so people wouldn't notice until they intentionally search for them and I actually wanted an answer from somebody who has practical experience with it...

[saadeghi]

I actually wanted an answer from somebody who has practical experience with it...

What's the question?

do you think daisyui could be implemented with just the new "css-first" approach without using it as a plugin?

I answered your question. Currently it's not implemented in the alpha version. There no API for it and there's no docs yet.

But this is the goal according to Adam's tweet:

[kuchta]

What's the question? Have somebody practical experience using (porting) daisyUI to the Tailwind v4 alpha?

If you had at least taken the time to understand the the blog post, you would't close the discussion, because you would understand that if as you say daisyUI is just css, than you probably don't need the new plugin API at all! You can just import daisyUI css and port all theme() functions calls to css variables and I don't know what else... That's why I'm asking, because I don't know daisyUI internals and it's interface with Tailwind to answer that, but you evidently don't know what this new version brings and your answers reflect that. Sorry to say that, but it's getting a little bit unbearable...

[saadeghi]

Have somebody practical experience using (porting) daisyUI to the Tailwind v4 alpha?

How can possibly anyone have practical experience of using a Tailwind CSS plugin when the creator of Tailwind CSS said it DOES NOT EXIST in the current alpha release?

we should leave this discussion open

the problem with closed discussion

you would't close the discussion

This is why you're a angry.

I've never seen anyone being this obsessive about a GitHub discussion so I don't know what to say at this point...

[kuchta]

If you understand the design of the new version, you wouldn't again and again talk about daisyUI as a plugin of Tailwind anymore. That's where the misunderstandings occur. If you don't know what to add to the discussion, it would be probably better not say anything and let it open for others to say samething actually usefull. I know this is you project and your repo, but you are not the only one here...

[oneezy]

hey guys! @saadeghi @kuchta

it is indeed possible to easily import existing css in Tailwind v4 and everything just work.

if you need to overwrite/extend or create new TW v4 utility classes then it's easy as:

/* app.css */
@import 'tailwdind.css';

@theme {
  color-green-500: #bada55;
  color-primary: #bada55;
}

that's it!
I've been hacking away at my own little v4 ui lib as a proof of concept and i haven't ran into any issue.

• https://github.com/oneezy/ui/blob/next/src/lib/ui.css @import's
• https://github.com/oneezy/ui/blob/next/src/lib/css/colors/colors.css @theme

my ui lib is built for svelte v5/ sveltekit but feel free to install it:

pnpm i -D @oneezy/ui@next

I feel your pain @kuchta , I've been been urging other ui lib maintainers they can begin updating to v4 with no problems.

so i would say jump on it @saadeghi 😎

[oneezy]

Whatever you wrap inside @theme will only be created if it's used so I'm not sure what you're referring to

[saadeghi]

@oneezy The components, all the daisyUI class names,… we can't put them inside @theme:
https://play.tailwindcss.com/lv4EYb3reH?file=css

- `@theme` blocks must only contain custom properties or `@keyframes`.

[oneezy]

Oh, you guys don't even include the semantic classes in by default? in other words, if I install DaisyUI and never use the .btn class, it will never be generated?

Here' an example of what I was referring to:
https://play.tailwindcss.com/Ak17xxMmTb?file=css

<button class="btn">button</button>

@import "tailwindcss";

@theme {
  --color-primary: var(--color-blue-500, blue);
  --color-primary-content: var(--color-white, white);
}

@layer components {
  .btn {
    @apply bg-primary text-primary-content;
  }
}

[saadeghi]

Oh, you guys don't even include the semantic classes in by default? in other words, if I install DaisyUI and never use the .btn class, it will never be generated?

Only used class names goes to the production CSS file. Otherwise all the unused class names with all possible variations will be a big file.
Just like other Tailwind CSS class names. For example if m-10 is not used, it won't be in CSS file.
And because we are using the Tailwind CSS plugins API, it works the same for daisyUI as a plugin.
Currently the plugins API is not implemented in Tailwind CSS 4-alpha. But it's just alpha. It's not ready for production. Even all the CSS variables you don't use are included in the production file as you can see in the Generated CSS section in Tailwind Play…

If you can't wait for the stable version of Tailwind CSS, a workaround would be using daisyUI separately, as a CSS file and remove the unused style using PurgeCSS

[oneezy]

And because we are using the Tailwind CSS plugins API, it works the same for daisyUI as a plugin.

ahhh ok that makes sense on why you're holding off. i wasn't aware of the ability to tree shake out your own custom classes you create. good to know!

[saadeghi]

I started this discussion for daisyUI 5 alpha:
#3246

Let me if you have any feedbacks, suggestions, questions