It's been a while. I have spent a couple months dealing with some personal issues. But I want to jump back into writing and discussing some rather important and valuable facts to improve my own understanding of coding, as well as yours.
But I don't want to do that now.
I’d rather tell you why TailwindCSS is stupid and on the corner of useless and this not being news.
I'm going to outline some points on why you should or shouldn't use Tailwind. This will include objective topics like speed and size. As well as how customizable is it, readability, used in teams, and how beginner friendly. While comparing these marks to its competitors
This guy does a decent job comparing speed tests with css vs Tailwind [programonaut.com/Tailwind-css-vs-css-an-in-..
Tl;dr](programonaut.com/Tailwind-css-vs-css-an-in-..Tl;dr) the difference in performance between regular CSS and Tailwind CSS might not be significant for most projects.
Regarding raw performance, regular CSS is generally more performant than Tailwind CSS because it avoids the additional overhead of generating and parsing utility classes. Regular CSS only includes the styles you explicitly define, resulting in smaller CSS file sizes.
Following this thread of logic due to Bootstrap being larger and more intensive, it would be less performant overall than Tailwind. By default, Bootstrap's CSS file can be relatively larger due to its extensive set of styles and components. This larger CSS file might include styles you may not use in your project, leading to some unused CSS being loaded, potentially impacting performance.
So regrettably Tailwind may have a performance edge on other UI kits. However, speaking in a practical manner, the performance is marginal. Even comparing with material UI and its ability to code split which, similar to Tailwind, only allows for the components you want to use, It's such a marginal performance difference that it wouldn't impact Johnny Bean's construction company website.
So if speed and size are in favor of Tailwind, why wouldn't I use Tailwind instead of other UI toolkits or even SASS.
Well, thank you me for asking me, and to answer my own question let's talk about customization versus intuitiveness.
When I Google how Tailwind matches up with Bootstrap or material UI, I get a thousand of the same tired blogs discussing how Tailwind is more customizable than Bootstrap, but how Bootstrap is more intuitive and comes with more components than Tailwind. And sure, those thousands of blogs have a point. Tailwind is more customizable than Bootstrap, but so is basic CSS. And SCSS allows you to customize your CSS styles and structures at a low level, making it well-suited for custom designs and fine-grained control over styling. These bloggers never say the real conclusion. They are afraid to say when it's applicable for a team to squander their efforts in a middling indecisive UI toolkit like Tailwind, never.
You're a big company that wants to be efficient and you prioritize rapid development. There is a toolkit for that, a couple, material UI and Bootstrap fulfill that niche. If you're a smaller group, a game dev group, or a front end figma wielding Titan, you want complete control over writing your own CSS and defining custom styles from scratch. SCSS gives you the freedom to create a unique design and structure that fits your project's specific requirements.
As for readability, why would it ever be easy to read inline styles? There’s good reason computer science classes teach separation of concern. Having HTML or React or whatever congested with a style bar stretching far beyond a regular computer screen width is egregious. It’s messy, and while this is subjective, I don’t like it.
While this is also subjective, if beginner friendly is important, use a toolkit that goes all the way on being beginner friendly. Tailwind is the middle ground between easy and customizable and fails to excel in either camp.
So when you are choosing your next toolkit or CSS architect. Remeber to Min-Max, go full on customizable with SCSS or go very beginner friendly with Bootstrap. Don’t resort to the ugly middle child that is Tailwind just because you heard it’s popular.
Also, here are some trends that may enlighten just how popular Tailwind actually is.
Google Trends:
[trends.google.com/trends/explore?cat=1227&a..
](trends.google.com/trends/explore?cat=1227&a..)
Stack Overflow trends:
https://insights.stackoverflow.com/trends?tags=Tailwind-css%2Csass%2Cbootstrap-4%2Cmaterial-ui%2Cbootstrap-5
Npm downloads:
[npmtrends.com/@material-ui/system-vs-@mater..
](npmtrends.com/@material-ui/system-vs-@mater..)
However this is just my opinion. If you aren't convinced (and why would you be) check out this repo that has all frameworks available in a very concise place. https://github.com/troxler/awesome-css-frameworks
Remember, you deserve better than Tailwind.
Have a good day and be well.