Tailwind CSS Cheat Sheet
Tailwind utility-first reference for spacing, responsive prefixes, state variants, dark mode, @apply, config, and arbitrary values.
Tailwind turns design tokens into utility classes you compose in markup: no custom CSS file, no naming debate, no dead code. The default scale is rem-based and 4-step, the responsive breakpoints are mobile-first, and any value can be overridden inline with the bracket syntax.
Utility-first concept
A utility class does one thing well and the design is in the markup. Combine them; the build extracts only the classes you actually use.
<button
class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white
shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2"
>
Save changes
</button>
| Concept | What it replaces |
|---|---|
| Utility classes | Hand-written CSS in stylesheets |
Theme tokens (bg-blue-600) | Magic hex codes |
Responsive prefixes (md:) | Manual media queries |
State variants (hover:, focus:) | Pseudo-class CSS |
dark: variant | A prefers-color-scheme media block |
Spacing scale
Spacing utilities are rem-based by default (1 = 0.25rem = 4px). The core scale runs 0 through 96, and arbitrary values are one keystroke away.
<div class="p-4 m-2 gap-4">
<div class="px-6 py-3">Padded card</div>
<div class="mt-8 mb-2">Stacking</div>
<div class="space-y-4">Vertical rhythm between children</div>
</div>
| Prefix | Targets | Example |
|---|---|---|
p-, px-, py-, pt-, pr-, pb-, pl- | padding | p-4 = 1rem |
m-, mx-, my-, mt-, mr-, mb-, ml- | margin | m-2 = 0.5rem |
gap-, gap-x-, gap-y- | grid/flex gap | gap-4 |
space-x-, space-y- | child margins | space-y-2 |
w-, h-, size- | width/height | w-32 |
top-, right-, bottom-, left-, inset- | positioning | top-0 |
| Token | rem | px |
|---|---|---|
0 | 0 | 0 |
1 | 0.25 | 4 |
2 | 0.5 | 8 |
4 | 1 | 16 |
8 | 2 | 32 |
16 | 4 | 64 |
32 | 8 | 128 |
64 | 16 | 256 |
96 | 24 | 384 |
Responsive prefixes
Breakpoints are mobile-first: a class without a prefix applies at all sizes; adding md: upgrades it from 768px upward. Multiple prefixes can stack on a single element.
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- 1 col on mobile, 2 on tablet, 3 on laptop, 4 on desktop -->
</div>
| Prefix | Min-width | Common target |
|---|---|---|
| (none) | 0 | Base, mobile |
sm: | 40rem / 640px | Large phone |
md: | 48rem / 768px | Tablet |
lg: | 64rem / 1024px | Laptop |
xl: | 80rem / 1280px | Desktop |
2xl: | 96rem / 1536px | Wide desktop |
State variants
State classes attach to the standard pseudo-classes plus a few framework-specific helpers. group-hover: lets a parent react when a child is hovered.
<button
class="bg-blue-600 text-white
hover:bg-blue-700
focus-visible:ring-2 focus-visible:ring-blue-300
active:bg-blue-800
disabled:cursor-not-allowed disabled:opacity-50
aria-[busy=true]:opacity-75"
>
Submit
</button>
| Variant | Trigger |
|---|---|
hover: | Pointer over element |
focus: / focus-visible: | Keyboard focus |
active: | Active / pressed |
disabled: | Native disabled state |
first: / last: / odd: / even: | Position-based |
group-hover: | Reacts to ancestor with group |
peer-checked: | Reacts to a sibling peer |
aria-*: / data-*: | ARIA / data attribute states |
Colors and theming
Colors come from the theme; the default palette is calibrated for AA contrast. Custom palettes extend the theme via tailwind.config.js and become first-class utilities.
<p class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">
Adapts to dark mode automatically.
</p>
<button class="bg-primary text-primary-foreground">Brand button</button>
| Prefix | Targets |
|---|---|
bg- | background-color |
text- | text color |
border- | border color |
ring- | box-shadow ring color |
divide- | divider color |
outline- | outline color |
placeholder- | placeholder text |
caret- | caret color |
accent- | form control accent |
fill- / stroke- | SVG attributes |
Sizing, layout, and dark mode
Use the size- shorthand for square dimensions, fractions (1/2, 1/3) for proportional sizing, and max-w-* for content widths. Dark mode is a dark: variant activated by either the media strategy (default, follows OS) or the class strategy (manual toggle).
<div class="flex items-center justify-between gap-4">
<div class="size-12 rounded-full bg-slate-200"></div>
<p class="flex-1 truncate">Truncates with ellipsis when too wide.</p>
</div>
<div class="grid grid-cols-[200px_1fr_200px] gap-6">
<aside>Sidebar</aside>
<main>Content</main>
<aside>Aside</aside>
</div>
Enable manual dark-mode toggling in tailwind.config.js:
export default {
darkMode: "class",
content: ["./src/**/*.{js,jsx,ts,tsx,vue}"],
theme: {
extend: {
colors: {
primary: {
DEFAULT: "#1da1f2",
foreground: "#ffffff",
},
},
fontFamily: {
sans: ["Inter", "system-ui", "sans-serif"],
},
},
},
plugins: [],
};
@apply, layers, and config
When you find yourself repeating the same long utility list, extract it with @apply inside a @layer. This keeps the cascade predictable and lets Tailwind still purge unused classes.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply inline-flex items-center justify-center
rounded-md px-4 py-2 text-sm font-medium
transition focus:outline-none focus:ring-2;
}
.btn-primary {
@apply btn bg-blue-600 text-white hover:bg-blue-700;
}
}
| @layer | Purpose |
|---|---|
base | Element resets like *, *::before { box-sizing: border-box } |
components | Reusable component classes built from utilities |
utilities | Utility overrides that should outrank defaults |
Arbitrary values and JIT
Tailwind's JIT mode lets you write any value inline with the bracket syntax — escape spaces with _ and replace / with _. Reserve this for one-offs that don't belong in the theme.
<div class="mt-[117px] grid grid-cols-[1fr_2fr_1fr] gap-[14px]">
<div class="bg-[#1da1f2]/40 text-[rgb(15,23,42)]">Custom colors and alpha</div>
<div class="w-[calc(100%-2rem)]">Computed widths</div>
</div>
| Form | Meaning |
|---|---|
w-[300px] | Explicit pixel width |
top-[117px] | Arbitrary positioning |
bg-[#1da1f2] | Arbitrary color |
grid-cols-[1fr_2fr] | Arbitrary template |
text-[14px] / text-[1rem] | Arbitrary size |
bg-[#1da1f2]/40 | Alpha modifier on arbitrary color |
If you find yourself reaching for arbitrary values repeatedly, extend the theme instead — that way the values participate in purge, theming, and tooling.
Tailwind v4 note
The @tailwind base/components/utilities directives and tailwind.config.js are still the documented path on Tailwind v3.x and remain the safest default for production. Tailwind v4 ships a CSS-first config using @import "tailwindcss" and @theme blocks; if you are starting fresh on v4, prefer the CSS-first flow, but the utility classes themselves behave the same.