Tailwind CSS

the intro

Tailwind is utility-first CSS: instead of writing class names and stylesheets, you compose tiny single-purpose classes directly in your markup. Padding, colors, layouts — all from a consistent scale. It feels weird for a week, then remarkably fast.

the sample

a styled card, no stylesheet

<div class="rounded-xl bg-white p-4
              shadow-md border-2">
  <h2 class="text-xl font-bold">Hi</h2>
  <p class="text-gray-500">Utility CSS.</p>
</div>

the docs