Intro

<!-- ===== The idea ===== -->
<!-- Instead of writing CSS for every component, compose utility classes that map 1:1 to CSS properties. -->
<button class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700">
  Save
</button>

<!-- ===== Install (Vite-style) ===== -->
<!--
  npm i -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p
  // tailwind.config.js -> set content paths
  // src/index.css ->
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
-->

<!-- ===== Responsive ===== -->
<div class="text-sm md:text-base lg:text-lg">Adaptive text</div>
<!-- sm: md: lg: xl: 2xl: are mobile-first breakpoint prefixes -->

<!-- ===== State variants ===== -->
<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50">
  Save
</button>

<!-- ===== Dark mode ===== -->
<div class="bg-white dark:bg-slate-900 text-slate-900 dark:text-white">
  Adapts to theme
</div>

<!-- ===== Layout (flex / grid) ===== -->
<div class="flex items-center gap-4">
  <img class="w-10 h-10 rounded-full" />
  <p>Alex</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div>One</div><div>Two</div><div>Three</div>
</div>

<!-- ===== Reuse with @apply (use sparingly) ===== -->
<style>
.btn { @apply px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700; }
</style>

<!-- ===== When Tailwind wins ===== -->
<!-- - Fast UI iteration with consistent spacing/colour scales -->
<!-- - Teams without a dedicated design system yet -->
<!-- - Marketing / dashboards where stylesheet drift hurts -->

<!-- ===== When Tailwind hurts ===== -->
<!-- - Strong design system already in place (might fight it) -->
<!-- - Email HTML (utilities don't survive inlining well) -->
<!-- - Class lists become long; needs editor support (Tailwind IntelliSense) -->

<!-- ===== Patterns to internalise -->
<!-- - Compose utilities for layout; extract a component only when reused 3+ times -->
<!-- - Use the design tokens (spacing/colors) defined in config; don't hard-code px in templates -->
<!-- - Reach for clsx / cn helpers for conditional classes -->
<!-- - JIT mode (Tailwind 3+) generates only what your files use -->

<!-- ===== Pitfalls ===== -->
<!-- - Inline class soup with no component extraction -> 200-char class strings -->
<!-- - @apply everywhere -> reinvents CSS; defeats the utility-first benefit -->
<!-- - Forgetting content paths in config -> classes don't appear in build -->
<!-- - Mixing arbitrary values (text-[19px]) when a scale token would do -->

<!-- Tailwind = atomic utility classes you compose in your markup -->
<div class="flex items-center gap-3 p-4 rounded bg-slate-100">
    <img class="w-10 h-10 rounded-full" src="avatar.png">
    <h2 class="text-lg font-semibold">Ada</h2>
</div>