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 and height
Text
Background, border, radius and shadow
Overflow and lists
Print

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.

The hidden attribute hides any element that has a Formulize UI class, whatever the class is: a card, a stack or a button with hidden is not shown. Use it for what a script shows and hides, such as a panel that opens beside a list. The script sets and removes the attribute, and the classes stay as they are.

Width and height

Width and height, 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.
`fz-h-full`	The full height of its container, when the container has a height of its own.
`fz-min-h-0`	On a child of a flex or grid container: may get shorter than its content. A part that scrolls, in a column of a set height, needs it, or it makes the column taller instead of scrolling.

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.
`fz-uppercase`	Capitals.
`fz-tracking-{wide,wider}`	Wider letter spacing. With `fz-uppercase`, a small size and `fz-text-muted`, the small label over a figure or a group.

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,y-auto,hidden}`	Scroll when needed, scroll sideways only, scroll up and down only, or clip.
`fz-list-none`	No bullets or numbers.

Print

For a page that is meant to be printed, such as a schedule or a confirmation: what shows on paper, and where the sheets break.

Class	What it does
`fz-print-only`	Only on paper: a logo, a line for a signature.
`fz-print-hidden`	Only on screen: the Print button, links back into the site.
`fz-break-before-page`	Starts a new sheet.
`fz-break-inside-avoid`	Kept together on one sheet, when it fits on one.

A theme leaves its own header and menus off the printout, so these are only for your own content.
A print button is a link or a button that calls window.print(). Give it fz-print-hidden.

Example

<div class="fz-stack">
  <div class="fz-toolbar fz-border-b fz-pb-3">
    <div class="fz-toolbar__start"><h2 class="fz-text-xl fz-font-semibold">Workshop schedule</h2></div>
    <div class="fz-toolbar__end">
      <span class="fz-print-only fz-text-muted">Printed copy</span>
      <button type="button" class="fz-btn fz-print-hidden" onclick="window.print()">Print</button>
    </div>
  </div>
  <p>Thursday, 3:30 to 5pm, in the library.</p>
  <p class="fz-break-before-page">This paragraph starts the second sheet.</p>
</div>