Utilities

Utilities do one thing each, with Tailwind's names and meanings. On the same element, a utility wins over a layout class or a component. {n} is a spacing step: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12 or 16, each 4px at standard density. s and e mean start and end, which follow the text direction; l and r are always left and right, so prefer s and e.

Margin and padding
Display and visibility
Width
Text
Background, border, radius and shadow
Overflow and lists

Margin and padding

Space outside (margin) and inside (padding) an element. Every property comes in every step.

Class	What it does
`fz-{m,p}-{n}`	All sides.
`fz-{m,p}{x,y}-{n}`	Left and right (x), or top and bottom (y).
`fz-{m,p}{t,b}-{n}`	Top, or bottom.
`fz-{m,p}{s,e}-{n}`	Start, or end.
`fz-{m,p}{l,r}-{n}`	Left, or right.
`fz-m{,x,s,e,l,r}-auto`	Automatic margins: centre a block (`fz-mx-auto`), or push it to one end of a row (`fz-ms-auto`).

The more specific one wins: fz-m-4 fz-mt-0 leaves the top margin at 0.
A margin utility on a child of a layout class wins over the layout class's margin reset.

Display and visibility

Show, hide, and change how an element is laid out.

Class	What it does
`fz-{block,inline-block,inline}`	Display type.
`fz-hidden`	Hidden.
`fz-sr-only`	Hidden on screen but read by screen readers: a label for something only an icon shows.
`fz-hide-on-mobile`	Hidden on screens narrower than 48rem (768px).
`fz-show-on-mobile`	Hidden on screens 48rem and wider.

Width

Width, and whether an element can shrink.

Class	What it does
`fz-w-{full,auto,fit}`	The full width of its container, its natural width, or the width of its content.
`fz-max-w-full`	Never wider than its container.
`fz-min-w-0`	On a child of a flex or grid container: may get narrower than its content. `fz-truncate` needs it there.

Text

Size, weight, font, line height, alignment, colour and wrapping.

Class	What it does
`fz-text-{xs,xs-plus,sm,base,lg,xl,2xl,3xl}`	Size, with its line height.
`fz-font-{normal,medium,semibold,bold}`	Weight.
`fz-font-{sans,heading,mono}`	The main font, the secondary font, or the monospaced font.
`fz-leading-{tight,snug,normal}`	Line height.
`fz-text-{start,center,end,left,right}`	Alignment.
`fz-text-{default,muted,subtle}`	The normal, secondary or tertiary text colour.
`fz-text-{accent,on-accent,success,warning,danger,info}`	Coloured text. For short, emphasised text such as a total or a status word, not paragraphs: some themes' status colours are too light for body text.
`fz-truncate`	One line, cut off with an ellipsis.
`fz-text-nowrap`	Never wraps.
`fz-wrap-break-word`	Long words and URLs break rather than overflow.
`fz-tabular-nums`	Figures of equal width, so columns of numbers line up.

Example

<div class="fz-stack fz-gap-2">
  <p class="fz-text-2xl fz-font-semibold fz-tabular-nums">$12,480.00</p>
  <p class="fz-text-muted fz-text-sm">Raised so far this year</p>
  <p><span class="fz-text-success fz-font-semibold">+18%</span> <span class="fz-text-muted">compared with last year</span></p>
</div>

Background, border, radius and shadow

Surfaces and edges, from the tokens.

Class	What it does
`fz-bg-{page,surface,surface-2,surface-3}`	Surface backgrounds.
`fz-bg-{accent,accent-soft}`	The accent, or a pale tint of it.
`fz-bg-{success,warning,danger,info}-soft`	A pale status tint.
`fz-border`	A 1px border on every side.
`fz-border-{t,b,s,e}`	A 1px border on one side.
`fz-border-0`	No border.
`fz-border-{strong,accent,success,warning,danger,info}`	The border's colour, with a border class.
`fz-rounded-{none,sm,md,lg,xl,full}`	Corner radius.
`fz-shadow-{none,xs,sm,md,lg}`	Shadow.

Example

<div class="fz-cluster fz-gap-4">
  <div class="fz-p-4 fz-bg-surface fz-border fz-rounded-lg fz-shadow-sm">Surface</div>
  <div class="fz-p-4 fz-bg-accent-soft fz-rounded-lg">Accent tint</div>
  <div class="fz-p-4 fz-bg-warning-soft fz-border fz-border-warning fz-rounded-lg">Warning</div>
</div>

Overflow and lists

What happens to content that doesn't fit, and list markers.

Class	What it does
`fz-overflow-{auto,x-auto,hidden}`	Scroll when needed, scroll sideways only, or clip.
`fz-list-none`	No bullets or numbers.