Tailwind CSS is a utility-first library that lets you style elements using predefined CSS classes, without having to create custom styles yourself.
For example, instead of keeping a typical button.css file like this:
.button {
background: #e60076;
color: white;
font-weight: 600;
padding: 0.5em 1em;
}…you can apply Tailwind classes directly in your markup, whether it’s HTML, JSX, or TSX:
<button class="bg-primary text-white font-semibold px-4 py-2">
Button Label
</button>For a long time, this approach felt verbose, even a bit ugly, to me. Instead of a simple <button class="button button-primary">Label</button> you end up with what looks like an endless list of utility classes that seem to bloat your HTML. And yes, there are a lot of classes to learn.
But there’s another side to it: I always struggled to keep my CSS files organized. Naming things was a constant headache. What do you do when you have two similar elements with slightly different styles? Create another utility class? A modifier class? Or, God forbid, use inline styles?
Then it clicked: I don’t actually have to deal with long class attributes everywhere. I already use components in frameworks like Vue or React. I define a <Button /> component once and reuse it across the project. Tailwind fits perfectly into that workflow.
Once I tried it, I immediately regretted not adopting it sooner. It sped up my development process dramatically. And over time, you memorize most of the class names without even trying.
To summarize this overly long post: I highly recommend giving Tailwind a chance. Build a small to-do app and use it instead of writing custom CSS. You might be surprised by how much you enjoy it.