Tailwind CSS v4.0 Beta 1

I don’t work on the frontend very often, I think the last time I did so was when bootstrap was “the tailwind”, but when I recently had to cover for one of our react developers I got to work with it. I genuinely didn’t think there was a difference in my work flow between the two. Looking up meta language magic in the official documentation and then using it through brute-force development. Maybe I’m missing something, more likely I’m just a terrible frontend developer.

The latter is true either way. These days I’ll use HTMX and let a LLM do the CSS. Unless I specifically have to work on something which faces customers. So I’m wondering if there is some trick to tailwind I’m missing?

Bootstrap is so much worse because of all the nested CSS styles. One of the big benefits of utility classes is that they’re relatively isolated to one element (with a few exceptions like tailwind’s group classes). This has a lot of benefits like eliminating spooky action at a distance and making elements so independent they can just be copy pasted between Tailwind projects.

If you’re brute forcing Tailwind then you need to study CSS fundamentals. The vast majority of its utility classes are essentially 1:1 translations of CSS properties with some syntax sugar and DX improvements. Translating them to custom classes is a mechanical process even without @apply. There are even browser extensions like Windy that can rip HTML elements with arbitrary CSS to Tailwind classes.

Probably, I’m just sharing how it feels to use it when you work on frontend once a year.