I recently gave Tailwind CSS a shot, and honestly? It’s a different beast from what I’m used to.

Tailwind is a utility-first CSS framework. Instead of pre-built components, you compose designs using small, purpose-built classes. Think building blocks rather than finished products.

The Difference

Most CSS frameworks hand you ready-made components—buttons, cards, navbars. Drop them in, done. It’s fast and convenient, until you want something that doesn’t match the default style. Then you’re fighting the framework.

Take Bootstrap’s card component:
Bootstrap Card Docs

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Clean, documented, works great. Until you want different spacing or colors—then you’re writing custom CSS overrides.

Tailwind doesn’t have a “card” component.
You build it yourself with utilities:
Tailwind Card Example

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </div>
</div>

Want it wider? Change max-w-sm to max-w-lg.
Different padding? Swap px-6 for px-8.
More rounded corners? Try rounded-xl.

Every class does one thing. String them together and you get exactly what you want without writing custom CSS.

Getting Started

The setup threw me off initially. Installing npm, configuring files, running build commands through terminal—it felt like overkill for styling.

But Tailwind’s docs are solid. Clear examples, good explanations. And if docs aren’t your thing, YouTube has plenty of walkthroughs (even in Indonesian if that helps).

The real MVP? Tailwind Intellisense for VS Code.

Install this extension and you get autocomplete for every utility class. No memorization needed. No constant tab-switching to docs. Just start typing and it suggests what you’re looking for.

The Moment It Clicks

After a few days, something shifts. You stop thinking about CSS and just… build.

“Why didn’t I start using this sooner?”

It’s faster. More flexible. Less fighting with specificity or overrides.

Still on the fence? Give it a weekend. You might not go back.