Tailwind CSS is a utility-first CSS framework made for building custom user interfaces. It provides a set of CSS classes generated based on a set of pre-defined design rules, such as spacing, colors, and typography that make it easy to create consistent designs.
This approach allows developers to focus on writing HTML and leaving the styling to the pre-defined classes, which can help to speed up development and improve consistency across a project.
Tailwind works great with component-based libraries such as React or Vue.js.
But is Tailwind all that it is claimed to be, or is it a detriment to web development?
As always, opinions vary.
Tailwind VS Vanilla CSS
One of the main pros of Tailwind its advocates are mentioning is the speed of styling and development. Also, you do not have to be very proficient with CSS, so a lot of javascript-oriented developers benefit from using frameworks like Tailwind (or Bootstrap for that matter) as there are thousands of pre-built classes available enabling you to rapidly develop user interfaces.
The irony is that many of those same developers are bashing libraries like jQuery in favor of Vanilla js arguing that the libraries are too heavy and bloated. True, you can optimize your final CSS stylesheet in Tailwind, but the HTML will still look like crap.
Being an old-school developer working with these languages (HTML, CSS) for over 20 years I also find this part very annoying, as I set my foundations many years ago on semantic HTML, and welcomed the CSS revolution where we ditched old practices of overblowing HTML code. This kind of feels like a step back, really. Also, mixing styling with HTML? C’mon, dude!
I can’t help to notice a lot of the developers don’t know HTML really as well. They think they do, but there is no understanding of semantics whatsoever. So while Tailwind is easier and faster than Vanilla CSS for some developers, it will leave you with unnecessary markup and an HTML file looking like a WYSIWYG editor generated it.
On the other hand, you will develop UIs faster with it.
So where do I stand on this – will I will avoid Tailwind like the plague, or embrace it happily, like when someone offers you the back while grappling, and you jump on that sucker like it’s Christmas?
The answer is again – it depends. Standards change and evolve, and even though I personally don’t like something much, doesn’t mean I will be stubborn and refuse to learn it. Also, some of the clients’ websites already use Tailwind. What then, should we just reject those projects, or take them on and evangelize about performance? Have them recode half of their website and bill heftily for it?
I never liked Bootstrap honestly, but still have worked with lots of clients’ websites that rely on it heavily. And also, working with Shopify extensively, the fact that Shopify Hydrogen uses Tailwind also means I do need to be proficient in it.
And finally, to form a solid opinion on a topic, you must understand it thoroughly.
This is generally my philosophy on all new tech in front-end development, which grows by the day, where frameworks and libraries are being born and becoming obsolete every week, it seems.
I will pick up everything I can, but when I do have the ability to choose the stack I work with, I will do that carefully, depending on the project and its requirements.
Leave a comment