Skip to main content

Tailwind CSS

Overview​

Tailwind CSS is a utility-first CSS framework: you compose small classes (flex, p-4, text-slate-600) in markup or component files, optionally extracting components with @apply or framework helpers. The JIT compiler keeps production CSS small by scanning your templates.

Key concepts​

  • Utility classes — One concern per class; rapid iteration in JSX/Blade/ERB.
  • Design tokens — tailwind.config theme extension for brand colors, fonts.
  • Responsive & state — Prefixes like md:, hover:, dark:.
  • Plugins — @tailwindcss/forms, typography, container queries.
  • Purge/content paths — Configure scan paths so unused styles drop.

Build pipeline​

Sample: card utility composition​

<div class="max-w-sm rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
  <h2 class="text-lg font-semibold text-slate-900">Title</h2>
  <p class="mt-2 text-sm text-slate-600">Short supporting copy.</p>
  <button
    class="mt-4 rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-500"
    type="button"
  >
    Continue
  </button>
</div>

References​