<!-- Padding: p-{n} where n × 4 = px -->
p-0   → 0px       p-1  → 4px    p-2  → 8px
p-3   → 12px      p-4  → 16px   p-5  → 20px
p-6   → 24px      p-8  → 32px   p-10 → 40px
p-12  → 48px      p-16 → 64px   p-20 → 80px

px-4  → padding left + right: 16px
py-4  → padding top + bottom: 16px
pt-4  → padding-top: 16px
pb-4  → padding-bottom: 16px
pl-4  → padding-left: 16px
pr-4  → padding-right: 16px

<!-- Margin (same pattern) -->
m-4   → margin: 16px
mx-auto → center horizontally
mt-8  → margin-top: 32px
-mt-4 → margin-top: -16px (negative margin)

<!-- Font Size -->
text-xs    → 12px    text-sm   → 14px
text-base  → 16px    text-lg   → 18px
text-xl    → 20px    text-2xl  → 24px
text-3xl   → 30px    text-4xl  → 36px
text-5xl   → 48px    text-6xl  → 60px

<!-- Font Weight -->
font-thin      → 100    font-light     → 300
font-normal    → 400    font-medium    → 500
font-semibold  → 600    font-bold      → 700
font-extrabold → 800    font-black     → 900

<!-- Text Alignment -->
text-left    text-center    text-right    text-justify

<!-- Line Height -->
leading-none    → 1        leading-tight   → 1.25
leading-normal  → 1.5      leading-relaxed → 1.625
leading-loose   → 2

<!-- Other -->
tracking-tight   → letter-spacing: -0.05em
tracking-wide    → letter-spacing: 0.025em
tracking-wider   → letter-spacing: 0.05em
uppercase    lowercase    capitalize    normal-case
line-clamp-1    line-clamp-2    line-clamp-3

<!-- Common color patterns -->
bg-white        bg-black        bg-transparent
bg-gray-50  ... bg-gray-900
bg-blue-500     bg-red-500      bg-green-500
bg-yellow-400   bg-purple-600   bg-pink-500

text-white      text-black
text-gray-400   text-gray-700   text-gray-900

border-gray-200    border-blue-500

<!-- With opacity (Tailwind v3+) -->
bg-blue-500/50    → background: rgba(blue, 0.5)
text-black/80     → color: rgba(0,0,0,0.8)
border-white/20   → border: rgba(255,255,255,0.2)

flex          inline-flex
flex-row      flex-col      flex-row-reverse    flex-col-reverse

justify-start    justify-end      justify-center
justify-between  justify-around   justify-evenly

items-start    items-end    items-center
items-baseline  items-stretch

self-start    self-center    self-end

flex-1      → flex: 1 1 0%
flex-auto   → flex: 1 1 auto
flex-none   → flex: none
flex-wrap   flex-nowrap
flex-shrink-0    flex-grow

gap-4    gap-x-4    gap-y-4

grid                    display: grid
grid-cols-1 ... grid-cols-12
grid-cols-none

col-span-1 ... col-span-12
col-span-full
col-start-1    col-end-3

grid-rows-1 ... grid-rows-6
row-span-2
row-start-1    row-end-3

auto-cols-auto    auto-rows-auto
auto-rows-fr      auto-rows-min

<!-- Width -->
w-0    w-px   w-0.5   w-1   w-2   w-4   w-8
w-16   w-32   w-48    w-64  w-80  w-96
w-auto     w-full    w-screen
w-1/2      w-1/3     w-2/3   w-1/4    w-3/4

max-w-xs    → 320px    max-w-sm    → 384px
max-w-md    → 448px    max-w-lg    → 512px
max-w-xl    → 576px    max-w-2xl   → 672px
max-w-3xl   → 768px    max-w-4xl   → 896px
max-w-5xl   → 1024px   max-w-6xl   → 1152px
max-w-7xl   → 1280px   max-w-full  → 100%

<!-- Height (same pattern) -->
h-4    h-8    h-16    h-32    h-64
h-full    h-screen    h-auto
min-h-screen    min-h-full

<!-- Border -->
border          → 1px solid
border-2        → 2px solid
border-0        → no border
border-t        border-r    border-b    border-l

<!-- Border Radius -->
rounded-none   → 0
rounded-sm     → 2px
rounded        → 4px
rounded-md     → 6px
rounded-lg     → 8px
rounded-xl     → 12px
rounded-2xl    → 16px
rounded-3xl    → 24px
rounded-full   → 9999px (pill / circle)
rounded-t-xl   → top corners only
rounded-l-xl   → left corners only

<!-- Shadow -->
shadow-sm     shadow      shadow-md
shadow-lg     shadow-xl   shadow-2xl
shadow-none   shadow-inner

<!-- Opacity -->
opacity-0    opacity-25    opacity-50
opacity-75   opacity-100

<!-- Blur -->
blur-none    blur-sm    blur    blur-md    blur-lg    blur-xl

<!-- Background blur -->
backdrop-blur-sm    backdrop-blur    backdrop-blur-md

static    relative    absolute    fixed    sticky

top-0    right-0    bottom-0    left-0
inset-0    → all sides 0

z-0    z-10    z-20    z-30    z-40    z-50    z-auto

overflow-hidden    overflow-scroll    overflow-auto    overflow-visible

block    inline-block    inline    hidden    flex    grid

sm:   → min-width: 640px
md:   → min-width: 768px
lg:   → min-width: 1024px
xl:   → min-width: 1280px
2xl:  → min-width: 1536px

<!-- Examples -->
<div class="w-full md:w-1/2 lg:w-1/3">...</div>
<p class="text-sm lg:text-base">Text</p>
<div class="flex-col md:flex-row gap-4">...</div>
<nav class="hidden lg:flex">Desktop Nav</nav>

hover:bg-blue-600     → on hover
focus:ring-2          → on focus
focus:outline-none    → remove focus outline
active:scale-95       → on click
disabled:opacity-50   → when disabled
dark:bg-gray-900      → dark mode
group-hover:text-blue → when parent .group hovered

<!-- Transitions -->
transition              all 150ms ease
transition-colors       color, bg, border
transition-transform    transform
duration-150   duration-200   duration-300
ease-in    ease-out    ease-in-out

<!-- Transform -->
scale-95    scale-100    scale-105
translate-x-4    translate-y-2
rotate-45    rotate-90