DEV Community

Tailwind CSS 4.0 Is Here: What You Need to Know

Shayan on January 23, 2025

Tailwind CSS 4.0 is here, and it's packed with updates that make styling your web projects faster, simpler, and more powerful. I'm personally ext...

Read full post

Jonas Scholz • Jan 23

I dont know if I like the css-first configuration. I kinda liked the javascript stuff?

david duymelinck • Jan 24

You know the library generates css?

If you want to keep the css hidden, how are you sure the library does things you want it to do?

Jonas Scholz • Jan 24

"You know C generates Assembly? If you want to keep the assembly hidden, how are you sure the compiler does things you want it to do?" Not trying to be snarky, but I don't understand your point. Its very easy to validate that, I mean I'd see pretty quickly if my font isnt loaded correctly? If I want I could also just look into the generated CSS

david duymelinck • Jan 24

If you are willing to check the generated code, what is the problem with the css config? According to the documentation you can do all the same things.

You are right my remark was snarky. But css is not that difficult. So your C Assembly analogy is not quite te same as you think it is.
I think i reacted on your comment assuming you want to solve everything frontend in javascript. And I shouldn't have done that.

Jonas Scholz • Jan 24

Fair points, I think the big difference is that I am not a frontend dev (infra mostly, assembly is easier than CSS for me lol) and just want my styling to work. I don't care how my box becomes the correct color, I just want them red. Using javascript was very simple for me because I know some Javascript. Now I need to rawdog CSS, which I didnt want to (that's why I am using tailwind!). Does that make sense? :D

david duymelinck • Jan 24

Damn I don't want to touch assembly code with a ten foot pole, respect!

The config is a bunch of css properties, so it is not that big of a learning curve. I assume there will pop up javascript to css converters soon, because of the popularity of tailwind.
And that will solve your problem.

I understand where your coming from. It just doesn't feels right to me that people think css and html are not worth the time to learn.

Ben Sinclair • Jan 24

you can now customize your Tailwind settings directly in your CSS. It's like having the controls for your website's style right where you're writing the styles.

You mean like regular CSS? I thought Tailwind expressly rejected CSS in CSS files? That's the philosophy of it - don't do anything in CSS or abstract anything out, keep it in the same component files as the HTML.

not-group-hover:text-gray-500 looks funny to me. It's less readable; I don't really intuit what it's trying to do, since as I understand it text-gray-500 would do exactly the same thing in this example?

Reid Burton • Jan 25

You mean like regular CSS? I thought Tailwind expressly rejected CSS in CSS files? That's the philosophy of it - don't do anything in CSS or abstract anything out, keep it in the same component files as the HTML.

Not quite. The repo for my website has a globals.scss file that has the @tailwind imports and more scss behind it, like styles for the navbar, and fonts. Tailwindcss uses css classes, it is not made to eliminate css, but rather to extend it's functonality.

Massimo Artizzu • Jan 26 • Edited

to extend it's functonality.

How does it "extend" CSS' functionality, if it uses CSS classes?

Reid Burton • Jan 26

It does so by providing thousands of useful css classes & colors by adding the classes wherever the @tailwind or @import rules are eg:

/*
    some code
*/
@tailwind base //This is where the tailwindcss classes are inserted by the build process.
/*
    more code
*/

Massimo Artizzu • Jan 26

So, it doesn't extend CSS' functionality: it just uses CSS as it was intended.

Reid Burton • Jan 26

Huh... I did not think of it like that.

Massimo Artizzu • Jan 24

Tailwind 4.0, or the major fourth iteration of an arbitrary reinterpretation of a subset of CSS with basically a write-only language that installs dozens of dependencies on your projects just to make you throw separation of concerns out of the window and wait for the next major release in hope to let you use a feature that browsers natively supported for months - if not years.
Always a great choice.

Peter Vivo • Jan 24 • Edited

The pervious Tailwind are outperform my expectations of compiled css size ( small as can be 4.88kb the greatest CSS file ziped size), can check on my tailwind related game repo: dev.to/pengeszikra/javascript-grea... . this features looks very promising, I deffinetly try out.

Thx for a great summarize!