Hacker News new | ask | show | jobs
by prohobo 1694 days ago
As someone who's been doing frontend work for 10+ years, Tailwind is great.

Over my career I started by using global CSS files, transitioned to CSS modules, then to styled-components. I never touched Bootstrap because it was clunky, ugly, and annoying.

Creating layouts and styling everything consistently has always been a pain in the ass. There'd always be some element that I decided to style differently, or break out of the "design pattern" just because I needed a one-off or it didn't fit well. On some projects I spent the majority of my time trying to organize styles so that I could remain consistent and handle edge-cases "well enough" that everything was still clear and legible.

The first time I saw someone using Tailwind I immediately thought "ffs not this Bootstrap garbage again", but I decided to roll with it because it wasn't my project. Since then I've been using Tailwind for all of my projects.

When you combine Tailwind with React, you get nudged into creating a library of components with default styles (ie. a design library). If you need to change the styles for certain instances of the components, you extend the component itself and apply styles according to flags (using classnames utility). If you need more control in certain situations, you use inline styles.

What this means is that Tailwind actually fixed my problems with styling consistency and organization, and made me better at writing re-usable React components.

Yes, the className prop can get long, but you can use the classnames utility to break it up into separate lines (and organize the classes however you want). Testing different styles for components becomes a lot easier too once you memorize the class name patterns that Tailwind uses. It quickly becomes legible and you can usually guess what the class name is for whatever style you want to add.

Still, I hope Tailwind can improve on this somehow to remove the remaining issues (legibility for beginners, and the long-ass className prop)