Design

Colors

Every color-related utility — bg-, text-, border-, outline-, decoration-, shadow- and scrollbar-thumb- — draws from the same palette: Tailwind CSS's default 26 color families, each with 11 shades from 50 (lightest) to 950 (darkest), plus five base keywords. The naming pattern is always .{utility}-{family}-{shade}.

Base keywords

Opacity modifiers

Append /opacity to any color class to blend it with transparency via color-mix(). Available steps are 10, 25, 50, 75 and 90 — the slash must be escaped in the stylesheet (.bg-blue-500\/50) but written plainly in your HTML's class attribute.

<div class="bg-blue-500/10"></div>
<div class="bg-blue-500/50"></div>
<div class="bg-blue-500"></div>

Background colors

Class pattern: .bg-{family}-{shade} → background-color.

Text colors

Same palette and shade scale, applied to color: .text-{family}-{shade}.

Also available on

Layout

Spacing

Margin, padding and gap all share one scale: step n equals n × 0.25rem, running every integer from 0 to 100, plus -px (1px) and -auto (margin only) keyword variants.

Live example

Margin / padding scale (excerpt)

Live example — horizontal centering

<div class="mx-auto px-6" style="width:200px;">centered</div>

Gap

.gap-{n} sets the gap property (both row and column at once) on a flex or grid container, using the same n × 0.25rem scale as margin/padding. For independent axes use .gap-x-{n} (column-gap) and .gap-y-{n} (row-gap).

<div class="flex gap-4">
  <div>A</div>
  <div>B</div>
</div>

<div class="grid grid-cols-3 gap-x-8 gap-y-2">...</div>

Layout

Sizing

w-, h-, min-w-, min-h-, max-w- and max-h- share Tailwind's classic sizing scale: quarter-rem steps from 0 to 3.5, then wider jumps (14, 16, 20, 24, 28, 32…96), plus keyword values.

Live example

Layout

Display & Position

Single-purpose classes for the CSS display, position, overflow and visibility properties.

Display

Flex and grid containers get their own set of alignment and track utilities — see Flexbox & Grid below.

Position

Z-index

.z-{n} for n from 0 to 100, plus .z-auto and negative values written as .-z-{n}.

Overflow

Visibility

Layout

Flexbox & Grid

Alignment utilities work the same way whether the container is .flex or .grid. Add .gap-* (see Spacing) to space children without margins.

Flex container

Alignment

Live example

<div class="flex items-center justify-between gap-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Grid

Typography

Text & Fonts

Font family, size, weight, alignment, decoration and wrapping behavior, all as single-purpose classes.

Font family

Size & weight

Weight runs from .font-thin (100) to .font-black (900) in the usual nine steps, plus .italic / .not-italic.

Alignment, decoration & wrapping

Borders & Effects

Borders & Radius

Width, side and color are independent axes — combine a width class with a color class to get a visible border.

Border width & sides

Radius

.rounded-{size} covers all four corners (xs sm md lg xl 2xl 3xl 4xl full none). Prefix with a side (t r b l) or logical edge (s start, e end) or a single corner (tl tr br bl) to round selectively.

Borders & Effects

Shadows, Opacity & Outline

Box shadow

.shadow-{size} (2xs xs sm md lg xl 2xl none), .inset-shadow-{size} for inset variants, and .shadow-{family}-{shade} to tint the shadow with a palette color.

Opacity

.opacity-{n} for every integer 0–100, setting the CSS opacity property on the whole element.

Outline

Borders & Effects

Filters

Each CSS filter function gets its own utility family. Combine several classes and the browser stacks them into one filter declaration each defines independently, so mixing e.g. .blur-sm with .grayscale applies both at once via the cascade.

Live example

Motion & Interaction

Transitions & Animation

Duration

.duration-{ms} sets transition-duration: 0 75 100 150 200 300 500 700 1000, plus .duration-initial. Pair it with your own transition-property to animate a hover or state change.

Animation

Motion & Interaction

Cursor, Pointer Events & Scrollbar

Cursor

One class per native cursor keyword, e.g. .cursor-pointer, .cursor-grab, .cursor-not-allowed, .cursor-crosshair, .cursor-zoom-in — covering the full CSS cursor value list.

Pointer events

Scrollbar