![Cover image for Tailwind CSS 4.0 Is Here: What You Need to Know](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F61tvib65put6gu6be1p5.png)
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...
For further actions, you may consider blocking this person and/or reporting abuse
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!
Thanks for the link
PSA: CSS file size is almost never the cause of your web performance issues.
when you target lower-end machines and bundle size matters, a 1mb file vs a 5kb file can make a huge difference. The impact is in the initial load times, which arguable is a variable concern. Some care, some don't
PSA: if you have a 1 MB CSS files, you most probably have way other problems than CSS parsing.
It'd be a symptom of a total lack of optimizations. E.g. JS bundles could very well be over 5 MB, and images could be original 12 Mpx shots directly from a camera. How about that for lower-end machines?
Also: stop lying to yourself or exaggerating for the sake of your deceptive arguments. You will never see a comparison between 5 KB of Tailwind generated CSS and 1 MB of user-defined classes. In my last project, where Tailwind is used scarcely, it already fares at 31 KB, which is more than double of the 15 KB of the custom-made CSS.
Conclusion: CSS file size is almost never the cause of your web performance issues. And Tailwind sure as hell is not the solution.
I dont know if I like the css-first configuration. I kinda liked the javascript stuff?
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?
"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
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.
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
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.
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 ittext-gray-500
would do exactly the same thing in this example?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.How does it "extend" CSS' functionality, if it uses CSS classes?
It does so by providing thousands of useful css classes & colors by adding the classes wherever the
@tailwind
or@import
rules are eg:So, it doesn't extend CSS' functionality: it just uses CSS as it was intended.
Huh... I did not think of it like that.
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.
Let's just target the purpose of it. Rather than writing css and classes all over your project and risk duplication and bloat in the generated bundles, tailwind takes all the used styles and optimizes the bundle output for the css. Anything not used does not get included, so while you may write CSS in a CSS file, if you dont have something that will treeshake and reduce CSS bloat, that is what tailwind is for. It has a specific purpose and if you don't care about its purpose, don't use it. You're absolutely right that it doesn't do everything that all css can do, but that's not the point of it.
The point is that Tailwind has no point, at all.
First of all, let's not forget about all those legacy Tailwind 2.x projects that ended up in production with the whole Tailwind library because the build step wasn't set up correctly with style shaking. That's the impact of Tailwind as a matter of fact.
If you write styles in a giant, global CSS file that covers the entire application, you have much worse problems to solve, and Tailwind won't help with them.
Modern CSS development is about writing styles encapsulated in your components. We have several ways to do it, being shadow roots, emulated encapsulation (like in Vue, Angular, Astro...), and now
@scope
. That's how you manage the cascade and handle much smaller files.Sure, some unused styles might slip in the bundle, but it's no problem if it's just some hundred of bytes. Keep in mind that CSS files are effectively cached by browsers, while HTML pages are often not because they're subject to frequent changes. Using Tailwind, you're telling the browser to download kilobytes of style declarations over and over again.
And I should add: even file compressors work better with CSS files than HTML files. If you use a mixin multiple times in your CSS, you can bet that gzip/brotli compressions take care of it. Doing the same with an ustructured list of declarations among multiple pages is simply not going to happen.
unocss.dev/ is more flexible and interesing project, supports Tailwind classes too
agora tem que esperar o shadcn atualizar e ser feliz com menos configurações