Tailwind CSS v4.0 Beta 1

I've never had as much fun doing front-end web stuff as I've had since I've picked up tailwind.

this is the honeymoon phase, wait until your package manager and transpiler is out of date, and your progressive web app framework is out of date, and your typescript version isnt compatible with the upgrade yet, and tailwinds isnt either or it is but none of the documentation is yet, but you have to upgrade because your CI/CD cant run your version of node anymore

and now you have 100 flags across 5 configuration files and dont know which one to change to make everything work, but changing it might break the ability for a random dependency to compile, and even if you get that to work it turns out your project doesnt render anymore

Good rant! That's kind of what web-development seems like sometimes. Almost every part of the technology stack is there to fix some other part of the stack that never was ideal to begin with. TypeScript being the best example. It only exists because JavaScript sucks, and JavaScript only ever existed because in 1994ish some guy failed to get Java to run in the browser, and the only reason we're building apps in what was originally a "Document Rendering" system (HTML) was also not by design either but just an accident of history. One train wreck after another.

I resisted using it for a long time, it just seemed too much like read-only code for me. But I've been building my latest project with it, and I have never iterated on the front end more quickly. It is great fun.

i've been using it for... years? and it still feels like magic when i use it. v4 fixes my only real issue with it which was the config file feeling so detached and rough compared to everything else.

or just use bun? used to also face all these issues - but with bun it's mostly gone for now (and for newer projects) - hope it stays that way!

I use bun where I can, and I’ve upgraded old projects to it successfully

the main project I work on uses nx, sst, and pnpm, it’s all tightly coupled. this project is fine for now. just different.

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?

Or just use CSS. Never had any of those issues.

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.

Always the right choice!

I feel the same. I tried many css solutions over the years and always made a mess.

Tailwind is by far the first time I'm productive with styling.

I'm impressed with everything they've built.

It’s a standalone executable.

What do you think are the best option to avoid that? I was wondering what could I do with a project that I have that is a long lived code base, so we have some legacy parts.

Looking at the alternatives I was considering Vite with React and Vue plugins (and try to migrate my code so it works by default without any other configuration in Vite) or try Astro (because I have Vue and React) with their default configuration, but still not sure what would be the best option.

If it where just for me I would rather use React like framework (while I don't like that much React) but at least bun supports JSX out of the box and they seems to be working towards having a bundler integrated.

Is tailwind better than CSS modules, and if so then why?

they serve different purposes.

CSS modules is a (great) mechanism for providing isolation, very useful in the context of today's component-oriented front end development.

Tailwind provides some (quite good) building blocks for a design system, such as a palette, a sizing scale, values for shadows and rounded corners... and a vast set of classes to apply them. The set of classes covers basically every CSS feature, making it possible to slap everything in the class attribute of your HTML elements and never or almost never have to deal with CSS files.

In other words, CSS modules is a solution for those who love CSS and needed just a way to not deal with naming clashes without resorting to BEM. Tailwind is a tool for those who very much would like to avoid writing CSS

no, it's not a good rant. this is the billionth "web dev is too complicated!" rant that is present under every. single. thread. about any technology vaguely related to front end development.

80/20 is the greatest "thing" of all time. You critique it from the outside but when you're in, oh man.

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

This site leans heavily backend it seems. There's a strain of patent smugness that comes with a lot of comments about frontend on this site and it's quite disheartening to see it.

You rarely see frontend devs disparaging backend devs for their tech choices.

I've been using it for a long time now and the honeymoon period hasn't ended. I do understand what you're saying, but luckily I keep it pretty simple with a standalone tw executable and no node.js or complicated frameworks, so I have been able to avoid these pitfalls.

https://tailwindcss.com/blog/standalone-cli

I haven't yet reached the end of the comments, but I'm also fully expecting at least one "Electron is a cancer that is eating my computer and the reason why my wife left me".

I just started HN a few months ago, so I haven't been around long enough to realize there's certain topics the HN aficionados have grown bored with. My apologies for the disruption.

Maybe I should revisit this stuff. I’ve been fighting anything other than my own custom CSS classes for a while. It’s beginning to look at bit dated and I have no interest in rewriting them for the few sites that I support (family members and a couple of charities). I am no web guru and much prefer my hobby/day job of embedded stuff that you’ll never see on a GUI. I keep hearing great stuff about tailwind though.

I think back-end development is a much more "comfortable" lifestyle (I'm full stack myself), even if lots of it is technically more difficult coding than front end (i.e. multiple threads, databases, load-balancing, etc), because there's a new front end technology that comes out every couple of years, making many of the front end tech stacks become obsolete rather fast and they're super fragmented in terms of large numbers of different and unique frameworks. Not to mention how plagued front end work was for so many years due browser incompatibility issues.

For example, on the back end in Java there's been just basically SpringBoot for a decade, and as long as you keep up with it's minor changes you're all set.

I get where you’re coming from, but I think it oversimplifies the challenges front-end developers face, and it feels a bit dismissive of their expertise. Front-end development isn’t just about chasing frameworks—it’s about crafting intuitive, performant, and accessible user experiences in a landscape that’s constantly evolving to meet user needs.

Backend stability has its advantages, but the rapid evolution on the front end reflects a response to real-world challenges—like improving developer ergonomics, addressing accessibility, or enhancing performance. Front-end devs often have to bridge the gap between design, user needs, and tech constraints in ways backend systems rarely have

In the end, the fragmentation you see in front-end frameworks is a strength. It’s not “easier” or “harder”—just different kinds of challenges. Both disciplines are vital, and dismissing one does a disservice to the teams and individuals who keep these systems working in harmony.

i was all-in on simple hand-rolled CSS for the longest time but finally gave Tailwind a try because of a work project. it was a pleasure to use once i did.

i like to use it with DaisyUI also. the part i like is that all the classes i need are already written so its just putting pieces together.

Sorry, but no, it's not "dismissive" or a "disservice" to say which things I found harder in my 35yrs experience.

I also say C++ is "harder" than Java, and that's not "dismissive" of Java devs. lol. I AM a Java dev. I did C++ for 10 years followed by Java for 25 yrs after that, so I feel justified to have opinions. I could tell you "Assembly Language" was hardest of all but I won't because it's "dismissive" of 99.999990% of humanity. lol.