DEV Community

Discussion on: What are your thoughts on Tailwind CSS?

Collapse
 
trixn86 profile image
trixn86 • Edited

I'm not sure if anybody already posted this but here is a link to a blog post of the author of tailwind css explaining why "Separation of Concerns" is a Strawman in his opinion and how he got from the "traditional" way of handling styling to utility first classes: adamwathan.me/css-utility-classes-...

It is a very convincing read and totally reflects how I feel about the topic given the years I spend developing web applications.

You should give tailwind css a try on your next side project.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

I did read it, but I'm still not convinced. Even just looking at the CSS that results on the Tailwind site there seems like too much, coming in at 144kB uncompressed. While that's not as bad as some of the sites that seem to be using the full Tailwind without anything stripped out, it's still more than feels necessary for a website like that.

Thread Thread
 
trixn86 profile image
trixn86 • Edited

That's not very big at all and also is due to the fact that the tailwind website itself uses most of the utility classes including all the breakpoints for demonstation purposes in the examples. The average website will have much less than that.

The site you are writing this on has >400kB of uncompressed css.

And adding just some examples of the most popular css frameworks websites: getbootstrap.com has 153kB uncompressed, bulma.io has 437 kB uncompressed, materializecss has 161kB uncompressed. Semantic UI has a whooping 628kB uncompressed. So all of those are acutally bigger in uncompressed size.

Stackoverflow has about 700 kB of uncompressed css. Reddit is a little hard to measure as they load css in chunks but in total it's also way above 144kB. Netflix has >700 kB. Instagram has >300 kB.

A more common example may be ottonow.de (a german shopping website). It uses tailwind css and has some more semantic css added. Total css uncompressed is 64 kB.

Also it has to be noted that tailwind builds do not grow at the same rate if you add new elements to the site. If you use all the available utility classes (which should never be the case) it reaches its maximum size while on a website with semantic css it will still grow as you have to add more and more css.

But even if it would be true that tailwind builds are somewhat bigger in uncompressed size: If that is your best argument in response to the article I linked then you will find about any excuse to not have to change your mind. This isn't even a metric that is very relevant. Much more relevant is kB over the wire and time to interactivity. Compressed size is absolutely fine and the tailwind site feels very snappy to me. No issues whatsoever.

This whole discussion reminds me of the people that said reactjs was bad when it came out. Now if you ask about any web or full stack dev they wouldn't look back for a second.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

I think there's a lot of hype surrounding Tailwind that's touting it as a magic bullet that will solve all problems. The fact that there are a lot of websites out there using over 1MB of Tailwind is a sign that it isn't. Now, for whatever reason, something is going wrong on those websites. Maybe the developers didn't run any cleanup tools afterwards, but the question then becomes "should they need to?"

Thread Thread
 
trixn86 profile image
trixn86 • Edited

How did you count those websites and how do you know that it's "lots" in relative terms? Can you provide some examples of those websites?

Also, why should I care? There are many sites out there that are incredibly poorly made not using tailwind at all. I don't measure the usefulness of a professional tool in terms of the number of people that don't know or don't bother to use it correctly. Running the "cleanup tools" is a matter of minutes to setup and a matter of seconds to run if you know how to do it and doesn't have any weight compared to the improvements in productivity and maintainability. And knowing how to do it is a 5 minute read in the "Optimizing for Production" section of the docs. I don't see how this is even an argument. Also ff you use a bundler like webpack to develop your web application in the first place the build chain is usually already there. You just have to provide the paths to your templates or react components or whatever it is you are using and the tool does the rest.

And yes, there is a hype around it but I like to stick to the actual arguments for why this tool is better than the others for my use cases. I'm not interested in tailwind because everybody talks about it but because it has convincing actual arguments for it while having many years of experience in developing web applications with the existing tools and knowing their weaknesses and pain points.

Thread Thread
 
koresar profile image
Vasyl Boroviak

Mate, in this thread I told them few times that none is using Tailwind without PurgeCSS.
But they simply ignore this fact.
No point in arguing here.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

If that were truly the case, there wouldn't be websites out there using 1MB+ tailwind.css files. Given that there are, there is clearly an issue where PurgeCSS (or an equivalent) isn't a natural part of the ecosystem. Even if it seems a natural pairing, unless it's a first class citizen partnership, it means that Tailwind has the same problem of other CSS frameworks/libraries: there's a lot that just isn't needed.

Thread Thread
 
trixn86 profile image
trixn86

There has always been and will always be a problem with people not bothering to ship bad code. How does the number of websites that have shitty bundle sizes has anything to do with that? It's 10 min of work to setup the optimisation and the fact that those people didn't do it is not a problem of tailwind or purgecss but the fact that those people do not care.

You claim is basically: Not all people fasten their seatbelts therefore cars are bad unless the have a built-in first class automatic seatbelt fastener.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

If it's not built-in and enforced by the library/framework, it will be ignored, and eventually becomes almost a defacto standard.

It's more similar to people not fastening their seatbelts because seatbelts aren't part of the car, and the driver needs to install them when they purchase the car. Because they're not built in, people won't use them unless something enforces their use.

Thread Thread
 
trixn86 profile image
trixn86

Again, there is a section in the docs describing the optimisation process which is literally a few-minute read and easy to follow and understand. The docs also describe, how to install tailwindcss and that includes autoprefixer and postcss. The reason that tailwind doesn't enforce installation of those is, that nowadays many people have custom build-chains and tools and there is no one-size-fits-it-all approach. Still, the recommendations are to install it and the docs only really describe how to install those together. Everybody that follows the "Installation" section will install it.

Your argument still boils down to "Some people don't care about bundle size and ignore the installation instructions therefore the framework itself sucks". Have you even read the docs? It clearly points out that you should install postcss together with tailwind and also how to do so. Not following that is a failure of the user, not of the framework.