This new Tailwind feature is scarier than I thought

Tailwind version 4 is a great release, but it kind of breaks one of the best promises that Tailwind makes. I'm a little scared...

SOURCE

Thank you to Naman (creator of StyleX) for writing such a great post. Give him a follow:

S/O Ph4se0n3 for the awesome edit 🙏

[tdotgg]

The tangent about Tailwind team not liking React in the middle is largely incorrect. Bad assumption I had made based on a few specific conversations. From Adam: “I love React, it’s the only way I will ever build a website again”

[edgeorgie]

Theo making 30 min clickbait talk like it was a loquendo tutorial

[MarlonEnglemam]

guys, hear me out what if we start hating on tailwind and create another CSS library and praise it for a few years and then do it all over and over again 🤩

[vipzip]

0:00 Introduction to Tailwind CSS V4 Critiques
1:34 Code Review Tool Demo with Code Rabbit
3:14 Detailed Tailwind V4 Feature Analysis
7:00 Performance Concerns with CSS Variables
10:00 Critique of Gradients and Design System Concerns
12:30 Analysis of Dangerous New Variants
15:00 Discussion on Descendant and Double Star Variants
18:25 Tailwind Class Name Prefixing and Merge Conflicts
22:40 Accessibility Concerns and REM Units

Generated by Snorvia AI chapter generator

[orionh]

Do I have gills and scales? Cus I just got baited

[icylace]

16:49 Here, I think writing out the CSS directly is better. It forces the developer to acknowledge the seriousness of what they're attempting to do. It's like how in low-level programming you would write assembly code directly during those rare cases when regular C code doesn't quite cut it, but by going to that level you acknowledge you really need to know what you're doing.

[Kousai]

I want to see someone style an entire site using ** and data attributes and all the classes on the body tag.

[ruaidhrilumsden]

Total agree on the brackets for arbitrary values. I really like that as a clear indication that you're leaving the world of the sensible Tailwind defaults or custom theme.

[JollyCoding]

Banning ** syntax would be a good rule to add to the tailwind eslint plugin.

[MadsterV]

Tailwind is just a class-wrapper for inline styles, so this follows :)

[rikschaaf]

26:08 There's actually a third: the pinch-zoom: it's a magnifying glass that doesn't change/reflow the page

[ВасилийТоррик]

Guys, you are crazy. The Tailwind becomes one more DSL on top of CSS... do you know how it will end up? It will become too bloated and you will make Tail-TailwindCSS to simplify TailwindCSS.
It is fine to use the simplest TailwindCSS classes that help structure things like margins, paddings, borders, grid spacing, etc. But for everything else - just use plain CSS.

[FrostInfusion]

slowly becoming a dev lolcow with these titles mate

[sighofman]

I'm really glad you called out the CMS example as middle ground for the **. The struggle can be real.

[ventic]

There's been a number of times I've had to do some prop drilling in React just to have some tiny component change its styling based on the section that it's in. The double star seems to just make that easier while still retaining clarity (as long as you're naming the data-attribute appropriately).

[edwardallenthree]

Thanks Naman! Great critique, 100% agree.

[rikschaaf]

25:19 "To be fair: the language is Javascript"
Well, I actually used tailwind in Java and Kotlin applications.

[pepkin]

17:00 For those specific cases we already have custom selectors in Tailwind v3, e.g. We don't need **.

And those selectors already cause problems in real projects. In the next version of Shadcn-Svelte there are those classes used in various components. One of them is Button.
They have a class `[&_svg]:size-4` which sets a size for all svg's (usually icons) inside the component. But that causes problems, because `[&_svg]:size-4` has a higher specificity than, let's say, `size-5` I'd use for an icon.
So the following button will have its icon of size 4, not size 5, despite what the code suggests:
<Button>
<Clock class="size-5" />
Set time
</Button>

I'll file a proper issue on GitHub. Nevertheless there might be more issues like this in other projects, because of too much power given to Tailwind.

[vrouilhac]

I've never heard of stylex before, aften spending a bit of time in the documentation, I was wondering, what are the main advantage of it compare to bare css files?

[wlockuz]

The beauty of Tailwind is that it was the WYSIWYG of CSS. You look at a class name and be guaranteed that it does what it says in the name and nothing else. With descendant variants this stops being the case which is why I think its best if it was a plugin instead.

That said, I can't wait for people to slap some stars on body and get confused later.