Add padding to an element. Scale: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96. Each unit = 0.25rem (4px).

p-4      → padding: 1rem (16px) all sides
px-4     → padding-left + right: 1rem
py-2     → padding-top + bottom: 0.5rem
pt-8     → padding-top: 2rem
pr-0     → padding-right: 0
pb-6     → padding-bottom: 1.5rem
pl-3     → padding-left: 0.75rem

x = horizontal, y = vertical, t/r/b/l = top/right/bottom/left.

Add margin to an element. Same scale as padding.

m-4      → margin: 1rem all sides
mx-auto  → margin-left + right: auto (center block)
my-8     → margin-top + bottom: 2rem
mt-4     → margin-top: 1rem
-mt-4    → margin-top: -1rem (negative)
mb-0     → margin-bottom: 0

mx-auto is the go-to for centering block elements.

Set gap between flex/grid children.

gap-4      → gap: 1rem
gap-x-4    → column-gap: 1rem
gap-y-2    → row-gap: 0.5rem

Use gap instead of adding margin to children — it's cleaner and doesn't affect the first/last child.

Add space between child elements (uses margin on children).

space-x-4  → horizontal space between children
space-y-2  → vertical space between children
<div class=“space-y-4”>
<p>First</p>   <!— no margin-top —>
<p>Second</p>  <!— margin-top: 1rem —>
<p>Third</p>   <!— margin-top: 1rem —>
</div>

Prefer gap with flex/grid. Use space- for stacked block elements.

Set width and height. Accepts the spacing scale plus special values.

w-64       → width: 16rem (256px)
w-full     → width: 100%
w-screen   → width: 100vw
w-auto     → width: auto
w-1/2      → width: 50%
w-1/3      → width: 33.333%
w-fit      → width: fit-content
h-16       → height: 4rem (64px)
h-full     → height: 100%
h-screen   → height: 100vh
min-h-screen → min-height: 100vh

Constrain the maximum width. Essential for readable content.

max-w-sm     → 24rem (384px)
max-w-md     → 28rem (448px)
max-w-lg     → 32rem (512px)
max-w-xl     → 36rem (576px)
max-w-2xl    → 42rem (672px)
max-w-4xl    → 56rem (896px)
max-w-7xl    → 80rem (1280px)
max-w-prose  → 65ch (ideal for text)
max-w-full   → 100%
max-w-none   → none

max-w-7xl mx-auto is the classic container pattern.

Set font size with matching line height.

text-xs    → 0.75rem / 1rem
text-sm    → 0.875rem / 1.25rem
text-base  → 1rem / 1.5rem
text-lg    → 1.125rem / 1.75rem
text-xl    → 1.25rem / 1.75rem
text-2xl   → 1.5rem / 2rem
text-3xl   → 1.875rem / 2.25rem
text-4xl   → 2.25rem / 2.5rem
text-5xl   → 3rem / 1
text-6xl   → 3.75rem / 1

Set 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

Fine-tune text spacing.

leading-none    → line-height: 1
leading-tight   → line-height: 1.25
leading-normal  → line-height: 1.5
leading-relaxed → line-height: 1.625
leading-loose   → line-height: 2
tracking-tighter → letter-spacing: -0.05em
tracking-tight   → letter-spacing: -0.025em
tracking-normal  → letter-spacing: 0
tracking-wide    → letter-spacing: 0.025em
tracking-wider   → letter-spacing: 0.05em

Text alignment and overflow handling.

text-left     text-center    text-right
text-justify  text-wrap      text-nowrap
truncate      → overflow: hidden + text-overflow: ellipsis + white-space: nowrap
line-clamp-3  → limit to 3 lines with ellipsis

truncate is perfect for card titles that might be too long.

Apply colors to text, backgrounds, and borders. Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

text-blue-500     → blue text
bg-gray-100       → light gray background
border-red-300    → light red border
text-white        → white text
text-black        → black text
bg-transparent    → transparent background
With opacity
text-blue-500/75  → 75% opacity
bg-black/50       → 50% opacity black overlay

Colors: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.

Flexbox layout utilities.

flex             → display: flex
flex-row         → direction: row (default)
flex-col         → direction: column
flex-wrap        → flex-wrap: wrap
items-start      → align-items: flex-start
items-center     → align-items: center
items-end        → align-items: flex-end
items-stretch    → align-items: stretch
justify-start    → justify-content: flex-start
justify-center   → justify-content: center
justify-end      → justify-content: flex-end
justify-between  → justify-content: space-between
justify-around   → justify-content: space-around

Center anything: flex items-center justify-center.

Control how flex children grow and shrink.

flex-1       → flex: 1 1 0% (grow and shrink equally)
flex-auto    → flex: 1 1 auto
flex-initial → flex: 0 1 auto
flex-none    → flex: none (don't grow or shrink)
grow         → flex-grow: 1
grow-0       → flex-grow: 0
shrink       → flex-shrink: 1
shrink-0     → flex-shrink: 0

Common pattern — sidebar + content: <aside class=“w-64 shrink-0”> + <main class=“flex-1”>.

CSS Grid layout utilities.

grid                → display: grid
grid-cols-3         → 3 equal columns
grid-cols-12        → 12-column grid
grid-rows-3         → 3 equal rows
col-span-2          → span 2 columns
col-span-full       → span all columns
col-start-2         → start at column 2
Responsive grid
<div class=“grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6”>
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>

Borders, border radius, and box shadows.

# Borders
border          → 1px solid
border-2        → 2px solid
border-t        → top border only
border-b-2      → bottom 2px
border-gray-200 → border color
Border radius
rounded         → 0.25rem
rounded-md      → 0.375rem
rounded-lg      → 0.5rem
rounded-xl      → 0.75rem
rounded-2xl     → 1rem
rounded-full    → 9999px (circle/pill)
Shadows
shadow-sm       → small shadow
shadow          → default shadow
shadow-md       → medium
shadow-lg       → large
shadow-xl       → extra large
shadow-none     → no shadow

Card pattern: rounded-lg border border-gray-200 shadow-sm.

Tailwind is mobile-first. Unprefixed classes apply to all sizes, prefixed classes apply at that breakpoint and up.

sm:   → 640px and up
md:   → 768px and up
lg:   → 1024px and up
xl:   → 1280px and up
2xl:  → 1536px and up
Example: stack on mobile, side-by-side on desktop
<div class=“flex flex-col md:flex-row gap-4”>
<div class=“w-full md:w-1/3”>Sidebar</div>
<div class=“w-full md:w-2/3”>Content</div>
</div>
Hide on mobile, show on desktop
<nav class=“hidden lg:block”>Desktop nav</nav>
<button class=“lg:hidden”>☰ Menu</button>

Always design mobile-first, then add md: and lg: overrides.

Apply styles only in dark mode.

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <p class="text-gray-600 dark:text-gray-400">Adapts to theme</p>
  <div class="border-gray-200 dark:border-gray-700">Card</div>
</div>

Enable in tailwind.config.js: darkMode: 'class' (toggle via class on <html>) or 'media' (follows OS preference).

Apply styles on user interaction.

hover:bg-blue-600       → background on hover
focus:outline-none      → remove outline on focus
focus:ring-2            → add focus ring
focus:ring-blue-500     → focus ring color
active:scale-95         → shrink on click
disabled:opacity-50     → dim when disabled
group-hover:text-white  → style child when parent hovered
Button example
<button class=“bg-blue-500 hover:bg-blue-600 active:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
disabled:opacity-50 disabled:cursor-not-allowed
text-white px-4 py-2 rounded-lg transition”>
Click me
</button>

The most common page layout wrapper.

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- page content -->
</div>

A reusable card pattern.

<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm
  dark:border-gray-700 dark:bg-gray-800">
  <h3 class="text-lg font-semibold">Title</h3>
  <p class="mt-2 text-gray-600 dark:text-gray-400">Description</p>
</div>

Sticky header + scrollable content + footer.

<div class="flex min-h-screen flex-col">
  <header class="shrink-0">Nav</header>
  <main class="flex-1">Content</main>
  <footer class="shrink-0">Footer</footer>
</div>