Tailwind CSS v3

[gustavopch]

Tailwind CSS v3 has just been released: https://tailwindcss.com/blog/tailwindcss-v3.

Some features seem to already exist in Windi CSS like colored shadows, but others like arbitrary properties don't AFAICT. Some that are provided as plugins in Windi CSS like scroll snap are now provided out of the box in Tailwind CSS.

The documentation says "All utilities of Tailwind CSS are supported in Windi CSS without any extra configuration" (https://windicss.org/guide/#basic-usage), so will Windi CSS receive all those new features too? If so, is there an ETA?

[JenuelDev]

Its been 5 days ago,, I am actually curios what will be the answer to this..

[Raicuparta]

I was considering swapping to Windi, but it seems to me like with Tailwind v3 the performance advantage isn't there anymore. Not sure if that's actually the case, but I agree that updating the Windi documentation would be helpful.

[JenuelDev]

but are tailwind utilities already available in windCSS? like the new feature in windiCSS? cause it not, I have no choice but to switch to tailwindcss, because these new features are mostly the things I need for creating websites for easily designing a website.

[MartB]

Everyone here is free to submit PRs for the missing features introduced in TW3 just like:

• feat: add .aspect-{ratio} classes #600
• feat: add '.decoration-x' utility classes #601
• Add 'scroll-snap-align: none' utility class #603
• feat: add '.columns-x' utility and friends classes #606
• feat: add '.will-change-x' utility class #608
• feat: add ability to use opacity values for box-shadows #614
• feat: add new colors from Tailind v3 #616

With diverging projects like these some feature compatibility delays are to be expected.
And updating the readme.md for every "minor" feature added in Tailwind does not seem sensible.

@BroJenuel
You have a choice not to use WindiCSS if you need the latest features from Tailwind 3.
Consider switching or start implementing the stuff you need for WindiCSS.

We are in no position to feel entitled to anything here.
The maintainers and all the contributors to windicss are doing a tremendous job keeping the real open source spirit alive.

Edit:
And to be completely fair the referenced guide document states this statement only applies to TW v2.0 as it is right now.
https://github.com/windicss/docs/blob/main/guide/index.md

Happy holidays!
Martin

[gustavopch]

@MartB Sure thing. We are just curious if the maintainers are planning to add those features — or at least that's my case. I don't see any problem with that. Of course, they can say there are no plans yet, they're not obliged to do anything.

[Raicuparta]

For me I'm just trying to figure out if the "just in time all the time" addition to Tailwind basically puts it on the same level as Windi when it comes to performance, or if Windi still has some other advantage. I'm not entirely sure how either of them work, but it it seems like they now use similar strategies?

[MartB]

@gustavopch
This wasnt aimed at you, but at the "i might have to switch" statements above.
I saw your comment as request / list of features that might need to be implemented because they make sense.

@Raicuparta
For me this is more of a choice between real open source and commercialized open project.
Im not in a position to benchmark the JIT but given that Windi.css had it first and the tailwind devs had something to look at / compare with i would assume that they are at least equal in performance.

But then again time will tell if issues pop up for them.

[Raicuparta]

@MartB totally get you. I'm not even that interested in who wins the benchmarks, I'd just like to know how similar / different the current versions are in how they approach performance optimizations. I'm sure it will become clearer with time.

[prab-it]

@Techassi @antfu
One more missing feature in Windi is the possibility to adjust the opacity on box shadow color.

[Techassi]

I will look into it!

[Techassi]

PR #614 adds the ability to use opacity values like .shadow-red-800/50.

[antfu]

Windi CSS v3.4 was released with the hard work by @Techassi! It should align most of Tailwind v3 utilities now.

[prab-it]

@Techassi @antfu thanks! 🙂

[mkhennoussi]

Thanks a lot for the work guys ! Should we open new issues or wait for an official update from WindiCSS including all new utilities from Tailwind v3 ?

For instance, the box shadow has been rebuild from scratch in Tailwind v3, not just the opacity feature like @Techassi has perfectly done ! (so the end result if quite different now)

Thanks !

[Techassi]

The way I rebuild the box shadow colors/opacities is pretty much the same as Tailwind does in v3. But correct me if I'm wrong here.

I will also adjust the docs in the coming days.

[mkhennoussi]

@Techassi Maybe I am doing something wrong on my side, but using Windi CSS v3.4 with the vite-plugin-windicss, the color of the box shadow is not working anymore, for instance :
shadow-lg shadow-orange-500 gives the same result as shadow-lg because of the order of the CSS classes generated.

But I didn't have time to check the issue in depth yet (maybe tonight 😉)

[Techassi]

Okay good to know. Will look into it and will open a PR if needed.

[sambedingfield]

Thanks for the amazing work @Techassi!

Just to confirm, does the box shadow rewrite change how we should use theme.extend.boxShadow?

[andreavaccari]

@Techassi thank you for your work. Could you also take a look at outlines?

• https://windicss.org/utilities/borders/outline.html

vs

• https://tailwindcss.com/docs/outline-width
• https://tailwindcss.com/docs/outline-color
• https://tailwindcss.com/docs/outline-style
• https://tailwindcss.com/docs/outline-offset

[Techassi]

This was actually on my TODO list. So yes, I will look into it!

[alexanderniebuhr]

#904