Tailwind CSS

Tailwind is a utility-first CSS framework. Instead of writing CSS, you apply pre-built single-purpose classes directly in HTML/JSX. No context switching between files.

Traditional CSS: write semantic class names, then style them. Tailwind: compose styles inline using utilities like flex, pt-4, text-gray-900.

At build time, Tailwind scans your files for class names and generates only the CSS you actually use — resulting in tiny production bundles (usually 5-15KB).

The learning curve is remembering class names. After a week it becomes muscle memory and you stop writing raw CSS entirely.

block inline-block inline hidden — display values.

flex inline-flex grid inline-grid

box-border — sets box-sizing: border-box. Tailwind applies this globally by default via preflight.

container — sets max-width to current breakpoint. Pair with mx-auto to center.

flex-row flex-col flex-row-reverse flex-col-reverse — direction.

flex-wrap flex-nowrap flex-wrap-reverse

Justify (main axis): justify-start justify-end justify-center justify-between justify-around justify-evenly

Align (cross axis): items-start items-end items-center items-stretch items-baseline

Self: self-auto self-start self-center self-end self-stretch

Flex items: flex-1 (grow+shrink) flex-auto flex-none grow shrink shrink-0

order-first order-last order-none order-{n}

grid-cols-{n} — e.g. grid-cols-3 for 3 equal columns.

grid-cols-none — remove column definition.

col-span-{n} — span n columns. col-span-full — span all.

col-start-{n} col-end-{n} — place item at specific grid lines.

grid-rows-{n} row-span-{n} row-start-{n} row-end-{n}

gap-{n} — gap between rows and columns. gap-x-{n} column gap. gap-y-{n} row gap.

place-items-center — center items in both axes. place-content-center — center the whole grid.

For responsive grids: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3

Tailwind uses a spacing scale where 1 unit = 4px by default.

p-{n} — all sides. px-{n} horizontal. py-{n} vertical.

pt-{n} pr-{n} pb-{n} pl-{n} — individual sides.

Same pattern for margin: m- mx- my- mt- mr- mb- ml-

m-auto mx-auto — auto margin. Center block elements.

Negative margin: -m-{n} -mx-{n} etc.

Common values: 0 0.5(2px) 1(4px) 2(8px) 3(12px) 4(16px) 5(20px) 6(24px) 8(32px) 10(40px) 12(48px) 16(64px) 20(80px) 24(96px)

Arbitrary: p-[13px] m-[2rem] — any value in square brackets.

w-{n} — fixed width from spacing scale.

w-full(100%) w-screen(100vw) w-auto w-fit w-max w-min

Fractions: w-1/2 w-1/3 w-2/3 w-1/4 w-3/4

max-w-sm max-w-md max-w-lg max-w-xl max-w-2xl ... max-w-7xl max-w-full max-w-screen-xl

min-w-0 min-w-full

Height: same pattern — h-{n} h-full h-screen h-auto h-fit h-dvh(dynamic viewport height)

min-h-screen min-h-full max-h-{n} max-h-screen

size-{n} — sets width and height together (Tailwind v3.4+).

aspect-square aspect-video aspect-[4/3] — aspect ratio.

font-sans font-serif font-mono — font family.

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-9xl

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)

leading-none(1) leading-tight(1.25) leading-snug(1.375) leading-normal(1.5) leading-relaxed(1.625) leading-loose(2)

tracking-tight tracking-normal tracking-wide tracking-wider tracking-widest — letter spacing.

text-left text-center text-right text-justify

uppercase lowercase capitalize normal-case

italic not-italic

underline line-through no-underline

truncate — overflow ellipsis + nowrap + overflow-hidden in one class.

text-ellipsis text-clip — text-overflow values.

whitespace-nowrap whitespace-pre whitespace-pre-wrap

break-words break-all break-keep

Multi-line clamp: line-clamp-{n} — clamp to n lines with ellipsis.

list-disc list-decimal list-none — list style.

list-inside list-outside — list position.

Tailwind has a built-in palette: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.

Each color has shades 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

text-{color}-{shade} — text color. e.g. text-gray-900 text-indigo-600

bg-{color}-{shade} — background color.

border-{color}-{shade} — border color.

ring-{color}-{shade} — focus ring color.

from-{color} via-{color} to-{color} — gradient stops.

Opacity modifier: bg-black/50 — 50% opacity. Works on any color utility.

Arbitrary: text-[#ff6600] bg-[rgb(255,100,0)]

border(1px) border-0 border-2 border-4 border-8 — border width.

border-t border-r border-b border-l — individual sides.

border-solid border-dashed border-dotted border-none — style.

Radius: rounded-none rounded-sm rounded rounded-md rounded-lg rounded-xl rounded-2xl rounded-3xl rounded-full

Per corner: rounded-tl-lg rounded-tr-lg rounded-bl-lg rounded-br-lg

Per side: rounded-t-lg rounded-b-lg rounded-l-lg rounded-r-lg

shadow-sm shadow shadow-md shadow-lg shadow-xl shadow-2xl shadow-none shadow-inner

shadow-{color}-{shade} — colored shadow (e.g. shadow-indigo-500/50).

opacity-0 opacity-25 opacity-50 opacity-75 opacity-100

blur-sm blur blur-md blur-lg — blur filter.

backdrop-blur-sm backdrop-blur-md backdrop-blur-lg — frosted glass effect.

grayscale brightness-{n} contrast-{n} saturate-{n} — CSS filters.

ring-{n} — box-shadow ring. ring-2 ring-indigo-500 — common focus style.

ring-offset-{n} — space between ring and element.

static relative absolute fixed sticky

Inset: inset-0(all sides 0) inset-x-0 inset-y-0 top-0 right-0 bottom-0 left-0

top-1/2 left-1/2 — fraction values. Center with: absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2

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

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

overflow-x-auto overflow-y-auto — per axis.

visible invisible — visibility (space preserved).

pointer-events-none pointer-events-auto

select-none select-text select-all

cursor-pointer cursor-default cursor-not-allowed cursor-wait cursor-grab cursor-grabbing

Tailwind is mobile-first. Unprefixed utilities apply to all sizes. Prefixed utilities apply at that breakpoint and above.

Default breakpoints:

sm — 640px+

md — 768px+

lg — 1024px+

xl — 1280px+

2xl — 1536px+

Usage: text-sm md:text-base lg:text-lg — small text on mobile, base on tablet, large on desktop.

hidden md:block — hidden on mobile, visible from md up.

block md:hidden — visible on mobile only.

Arbitrary breakpoint: min-[900px]:text-xl

hover:bg-indigo-700 — on hover.

focus:ring-2 — on focus.

active:scale-95 — while pressed.

disabled:opacity-50 — when disabled.

checked:bg-indigo-600 — checked inputs.

placeholder:text-gray-400 — input placeholder.

required:border-red-500 — required inputs.

first:mt-0 last:mb-0 odd:bg-gray-50 even:bg-white — nth-child equivalents.

empty:hidden — when element has no children.

group + group-hover:text-white — style child based on parent state. Add group to parent, use group-hover: on child.

peer + peer-checked:block — style sibling based on sibling state. Add peer to the control, peer-{state}: on the sibling that comes after.

dark:bg-gray-900 — applies in dark mode. Enable in tailwind.config: darkMode: 'class' (toggle via class on html element) or 'media' (follows OS setting).

motion-reduce:transition-none — respect reduced motion preference.

print:hidden — hide when printing.

portrait:flex-col landscape:flex-row — device orientation.

Combining modifiers: dark:hover:bg-gray-700 sm:hover:text-indigo-600 — stack any number of modifiers.

! prefix for important: !text-red-500 — adds !important.

transition — default transition on common properties (color, background, border, opacity, shadow, transform).

transition-all transition-colors transition-opacity transition-shadow transition-transform transition-none

Duration: duration-75 duration-100 duration-150 duration-200 duration-300 duration-500 duration-700 duration-1000

Easing: ease-linear ease-in ease-out ease-in-out

Delay: delay-75 delay-100 delay-150 delay-200 delay-300 delay-500

Translate: translate-x-{n} translate-y-{n} -translate-x-1/2 -translate-y-1/2

Scale: scale-0 scale-50 scale-75 scale-90 scale-95 scale-100 scale-105 scale-110 scale-125 scale-150

Rotate: rotate-0 rotate-1 rotate-2 rotate-3 rotate-6 rotate-12 rotate-45 rotate-90 rotate-180 — negative with -rotate-{n}.

Skew: skew-x-{n} skew-y-{n}

origin-center origin-top origin-top-left etc. — transform origin.

Common pattern: hover:scale-105 transition-transform duration-200

theme.extend — add to the default theme without replacing it. Always extend, don't replace unless intentional.

theme.extend.colors — add custom colors: { brand: { 500: '#ff6600' } } → use as text-brand-500.

theme.extend.fontFamily — add custom fonts: { display: ['Inter', 'sans-serif'] } → font-display.

theme.extend.spacing — add custom spacing values.

theme.extend.screens — add/override breakpoints.

content array — tell Tailwind which files to scan for class names. If a class isn't in a scanned file, it won't be in the output CSS.

Never construct class names dynamically by string concatenation — 'text-' + color won't be detected. Always use full class names in source.

Any utility accepts arbitrary values in square brackets:

w-[237px] top-[117px] bg-[#ff6600] text-[14px] grid-cols-[1fr_2fr_1fr]

CSS variables: bg-[var(--brand-color)]

Arbitrary properties (Tailwind v3.3+): [mask-type:luminance] — any CSS property not covered by a utility.

@apply — use Tailwind utilities inside CSS files: .btn { @apply px-4 py-2 rounded-lg bg-indigo-600 text-white; }. Use sparingly — defeats the point of utility-first for most cases. OK for base component styles.

Dynamic class names — Tailwind scans for full class strings. 'bg-' + color will NOT work — the class won't be generated. Safelist dynamic classes in tailwind.config.js if needed.

Specificity — Tailwind utilities all have the same specificity. Last one wins if there's a conflict. Use ! prefix (important modifier) as escape hatch.

prose class — from the @tailwindcss/typography plugin. Styles raw HTML content (blog posts, markdown). Not built-in.

Purging — in production, unused classes are removed. If classes are added dynamically (from a CMS or API), they may be purged. Add to safelist.

container is not centered by default — add mx-auto. Or configure container: { center: true } in config.

Preflight — Tailwind injects a CSS reset (based on modern-normalize) that removes default browser styles. Buttons have no style, headings have no size/weight, etc. This is intentional.

group and peer — the most powerful modifier patterns. Group: parent state affects child. Peer: sibling state affects following sibling.

JIT (Just-in-Time) — default since Tailwind v3. Generates CSS on demand. Enables arbitrary values, faster builds, all variants available everywhere.

v3 vs v4 — Tailwind v4 (2025) moves config to CSS-first using @theme directive instead of tailwind.config.js. Significant change — check which version your project uses.