Why Tailwind CSS is the worst
As a developer, I have had the opportunity to use various CSS frameworks and libraries in my projects. However, there is one that stands out as the worst of them all – Tailwind CSS.
Tailwind CSS promotes itself as a “utility-first” CSS framework, which means it provides a set of utility classes that can be used to style elements in the HTML. While this may sound like a good idea in theory, in practice, Tailwind CSS ends up making the codebase messy and difficult to maintain.
One of the main issues with Tailwind CSS is the excessive use of inline styles. Instead of writing clean and maintainable CSS in a separate stylesheet, developers are forced to clutter their HTML with numerous utility classes. This not only makes the HTML bloated and harder to read, but it also leads to duplication of styles across different elements.
Furthermore, the large number of utility classes in Tailwind CSS can make the HTML codebase difficult to navigate and understand. It becomes a nightmare to debug and make changes to the styling, as there is no clear separation of concerns between the HTML and CSS.
Another downside of Tailwind CSS is the impact it has on the performance of the website. The excessive use of inline styles can bloat the HTML file size, leading to longer load times and slower rendering of the page. This can have a negative impact on the user experience and SEO ranking of the website.
In conclusion, while Tailwind CSS may seem like a convenient and efficient way to style elements in HTML, it ultimately leads to messy and unmaintainable code. Developers are better off using traditional CSS frameworks or writing custom CSS to ensure a clean and efficient codebase.
For tutorial purposes it is fine, but for real big problems, less is better. Tools like SASS will do for your CSS what Typescript for your Javascript. Tailwind has became in a “cool” tool for people who dont like CSS and/or the separation of concern of traditional tools like Angular and prefer the React approach of writing logic + UI structure (HTML) in one single place, which is a secondary effect of a declarative/functional approach.
I can't believe this guy's videos make me laugh so much, I think I'm growing old with pride and I love that.
Just convinced me to not even look at tailwindcss 🔥
Nobody cares about your tech choices, except your colleagues. My startup cofounder friend can't live without tailwind so now I'm forced to use it. Can't tell you how much I hate it….even more so than I hate CSS.
i dont see any problem with it because they are all css frameworks just like bootstrap and the others, but for beginners i would advise to learn css basics first same thing for every language, using a framework after learning the basics gonna be easy by then.
You can do inset: 0 in css…
I have no idea who are those people who still does not use CSS modules in 2023.
Pure Tailwind for simple components.
Tailwind + CSS modules for complex components with verbose and branchy styles,
Enjoy the creative advertising, kudos
Why not use Sass with BEM naming convention
i think it's mental web degradation. Web devs learn how to puzzle lego from ready cubes but you will got the same legos. I see this ugly code with TW and feel sick. MUi ChakraUI even Bootstrap is good or clean custom css but not this crap.
true )
We have SASS, we have CSS @scope, we use style encapsulation in React and other. All this better then Tailwind if you understanding what are you doing in you work.
You, sir, have made me laugh in public. Well played.
just use inline css with html voila
for react
eg-
<h1 style={{'height":"99px"}}>jahelrhihrgiuheroi</h1>
I find CSS way better than Tailwind, Just learnt it to add a tech in my stack.
Using tailwind on a second project now and I hit the edge cases where it doesn't work but manual css does, pretty quickly.
Tailwind doesn't solve any problems. It just encourages code pollution, especially from Junior devs. CSS sheets helped remove this pollution from inline HTML, and garbage like Tailwind just brought it back.
Once all that code is inline all over the app, it will be nearly impossible to get it out. Anyone who thinks Tailwind is a legitimate option for anything needs to seek professional help.
inset-0 actually equals inset: 0; , not { top: 0; right: 0; bottom: 0; left: 0; } Tailwind isn't doing anything for you here other than making you write inline styles as classes.
Jajajajaj me encanta 😁
Love tailwind. Has been a game changer in my speed of output and delivering actually useful shit.