Tailwind Cheatsheet

<!-- ── Spacing (0.25rem per unit) ─────── -->
<!-- p-4 px-2 py-8 pt/pr/pb/pl-1  m-4 mx-auto -mt-2
     gap-4 space-y-2 (between children) -->

<!-- ── Sizing ─────────────────────────── -->
<!-- w-full w-1/2 w-64 max-w-md min-h-screen h-10 size-8 -->

<!-- ── Typography ─────────────────────── -->
<!-- text-sm/base/lg/xl..9xl  font-bold font-mono
     text-center italic underline truncate
     leading-tight tracking-wide uppercase -->

<!-- ── Color (shades 50-950) ──────────── -->
<!-- text-gray-600 bg-indigo-500 border-red-300
     bg-black/50 (opacity)  text-white -->

<!-- ── Borders & effects ──────────────── -->
<!-- border border-2 rounded rounded-lg rounded-full
     shadow-sm shadow-lg ring-2 ring-indigo-400
     opacity-75 blur-sm -->

<!-- ── Flex & grid ────────────────────── -->
<div class="flex items-center justify-between gap-4 flex-wrap">
<div class="grid grid-cols-3 gap-6 md:grid-cols-6">

<!-- ── Position ───────────────────────── -->
<!-- relative absolute inset-0 top-4 z-10 fixed sticky top-0 -->

<!-- ── States & responsive prefixes ───── -->
<!-- hover:bg-indigo-600  focus:ring-2  active:scale-95
     disabled:opacity-50  group-hover:visible
     dark:bg-gray-900 dark:text-white
     sm: 640px  md: 768px  lg: 1024px  xl: 1280px
     (mobile-first: unprefixed = all sizes,
      md:x = 768px AND UP) -->

<!-- A complete button: -->
<button class="rounded-lg bg-indigo-600 px-4 py-2 font-semibold
               text-white shadow hover:bg-indigo-500
               focus:outline-none focus:ring-2 focus:ring-indigo-400
               disabled:opacity-50">
  Save
</button>

<!-- A responsive card grid: -->
<div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 p-4
            sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-xl border bg-white p-6 shadow-sm
              transition hover:shadow-md dark:border-gray-700
              dark:bg-gray-800">
    <h3 class="text-lg font-bold">Card</h3>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
      Body text.
    </p>
  </div>
</div>

<!-- ── Escape hatches ─────────────────── -->
<!-- w-[137px] bg-[#1da1f2] grid-cols-[1fr_2fr]  (arbitrary)
     transition duration-200 ease-out animate-pulse -->