Why I use Tailwind CSS

Say you had a component like this that you were trying to build with html and css:

Peter White

@PWhite

Posts

324

Following

1249

Followers

2543

If you were using a BEM style of approach you might end up implementing it something like this:

<div class="profile-card">
  <div class="profile-card-header"></div>
  <div class="profile-card-body">
    <div class="profile-card-user-section">
      <div class="profile-card-avatar-wrapper">
        <img class="profile-card-avatar" src="/images/person.webp" alt="Person" />
      </div>
      <div class="profile-card-user-details">
        <h2 class="profile-card-full-name">Peter White</h2>
        <p class="profile-card-username">@PWhite</p>
      </div>
    </div>
    <div class="profile-card-stats-section">
      <div class="profile-card-stat">
        <div class="profile-card-stat-label">Posts</div>
        <div class="profile-card-stat-value">324</div>
      </div>
      <div class="profile-card-stat">
        <div class="profile-card-stat-label">Following</div>
        <div class="profile-card-stat-value">1249</div>
      </div>
      <div class="profile-card-stat">
        <div class="profile-card-stat-label">Followers</div>
        <div class="profile-card-stat-value">2543</div>
      </div>
    </div>
  </div>
</div>

So you have a bunch of classes named after the content, profile card is the main wrapper, and then you have all sorts of classes that are namespaced and scoped to the specific component and then you would go to write css that matches all these names and implements the styles to make it want to look the way you want it to look.

With Tailwind CSS the way that I would build the component looks something like this

<div class="rounded border bg-white p-4">
  <div class="h-32 rounded-t bg-[url('/images/person.webp')] bg-cover"></div>
  <div class="px-2">
    <div class="mb-6 flex">
      <div class="-mt-8 mr-4">
        <img class="block h-24 w-24 rounded-full border-4 border-white" src="/images/person.webp" alt="Person" />
      </div>
      <div class="pt-4">
        <h2 class="text-xl font-semibold text-gray-900">Peter White</h2>
        <p class="font-semibold text-gray-900">@PWhite</p>
      </div>
    </div>
    <div class="flex gap-x-8">
      <div class="w-1/3">
        <div class="text-sm font-semibold uppercase text-gray-900">Posts</div>
        <div class="text-sm font-semibold uppercase text-gray-900">324</div>
      </div>
      <div class="w-1/3">
        <div class="text-sm font-semibold uppercase text-gray-900">Following</div>
        <div class="text-sm font-semibold uppercase text-gray-900">1249</div>
      </div>
      <div class="w-1/3">
        <div class="text-sm font-semibold uppercase text-gray-900">Followers</div>
        <div class="text-sm font-semibold uppercase text-gray-900">2543</div>
      </div>
    </div>
  </div>
</div>