tailwind-syntax-utility-classes

name	tailwind-syntax-utility-classes
description	Use when writing Tailwind markup and you need to recall or verify the vocabulary of base utility families (spacing, color, typography, layout, flexbox, grid, sizing, border, background, effects). Also use when diagnosing why a class name does not produce expected styling, or when porting from a different framework and looking up the Tailwind equivalent. Prevents incorrect class names that the content scanner silently ignores, the v4 shadow-scale shift confusion where `shadow-sm` is smaller than v3's `shadow-sm` because `shadow-xs` was inserted, and the "I thought sm: meant small screens only" responsive trap (see [tailwind-syntax-responsive] for the full responsive treatment). Covers : the canonical class vocabulary for the ten base utility families with v3 and v4 differences flagged inline; the value scales (spacing 0..96, type xs..9xl, shadow 2xs..2xl, color 50..950, etc.); v4 dynamic spacing utilities that accept any integer; v4 opacity modifier syntax (`bg-red-500/50`); the official 22-family color palette in v4 oklch. Keywords: utility classes, padding, margin, p-4, px-2, m-auto, gap-4, bg-red-500, text-white, text-lg, font-bold, flex, grid, grid-cols-3, flex-1, justify-center, items-center, w-full, h-screen, rounded-md, shadow-md, shadow-xs, opacity-50, what class do I need, Tailwind cheat sheet, how do I center, how do I make 3 columns, blank screen no styling, class not generated, shadow looks different after upgrade, shadow scale changed, why is shadow smaller now, default color palette, how many shades does Tailwind have, bg opacity, color/50, slate gray zinc.
license	MIT
compatibility	Designed for Claude Code. Requires Tailwind CSS v3.4 or v4.0+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Tailwind CSS : Base Utility Classes

The canonical vocabulary. Every utility documented here is a literal token Tailwind generates from theme tokens. ALWAYS write classes as complete literals; see [tailwind-core-architecture] for why partial token construction breaks the content scanner.

Quick Reference

The ten base utility families

Family	Examples	Coverage in this skill
Spacing	p-4, px-2, m-auto, mt-8, space-y-4, gap-6	section 1
Color	bg-red-500, text-white, border-slate-200, ring-blue-500/50	section 2
Typography	text-lg, font-bold, tracking-tight, leading-relaxed	section 3
Layout (display + position)	flex, grid, block, hidden, absolute, top-0, z-10	section 4
Flexbox	flex-row, justify-center, items-center, flex-1, shrink-0	section 5
Grid	grid-cols-3, col-span-2, grid-rows-2, grid-flow-col, auto-cols-fr	section 6
Sizing	w-full, h-screen, min-w-0, max-h-96, size-10	section 7
Border	border, border-2, rounded-md, divide-y	section 8
Background	bg-white, , ,