Utility Classes

Complete reference of supported Tailwind-style utility classes.

@ui-registries/pdf supports a subset of Tailwind CSS utilities, adapted for @react-pdf/renderer's layout engine. All numeric values are in PDF points (pt) where 1 Tailwind unit = 3pt.

Arbitrary Values

Any utility that accepts a numeric value also supports arbitrary values with [...]:

<Block className="w-[210mm] h-[297mm]" />        {/* A4 page size */}<Block className="p-[20]" />                       {/* 20pt padding */}<Text className="text-[14]" />                     {/* 14pt font */}<Text className="text-[12px]" />                   {/* 12px → 9pt */}<Block className="aspect-[4/3]" />                 {/* 4:3 ratio */}

Plain numbers and pt values are points. px and rem are converted to points with the same ratio as the rest of the scale (1px = 0.75pt, 1rem = 12pt). Other units (mm, cm, in, %, vw, vh) are passed to react-pdf as-is.

Layout & Display

Flex Direction & Wrap

Flex Grow & Shrink

Alignment

Spacing

Padding and margin utilities follow the standard Tailwind pattern. Negative values are supported with the - prefix (e.g. -mt-2).

Padding

p-{n}, px-{n}, py-{n}, pt-{n}, pr-{n}, pb-{n}, pl-{n}

Margin

m-{n}, mx-{n}, my-{n}, mt-{n}, mr-{n}, mb-{n}, ml-{n}

Auto margins: m-auto, mx-auto (center horizontally), ml-auto (push to the right in a row), etc.

Gap

gap-{n}, gap-x-{n}, gap-y-{n}

Default Spacing Scale

Sizing

Size (width + height)

size-{n}, size-full, size-auto, size-{fraction} — sets both width and height to the same value.

Width

w-{n}, w-full, w-auto, w-{fraction}

Height

h-{n}, h-full, h-auto, h-{fraction}

Min / Max

min-w-{n}, max-w-{n}, max-w-full, max-w-none, min-h-{n}, max-h-{n}

Fractions and full work with min/max variants too.

Fractions

Twelfths (1/12 through 11/12) are also supported. All fractions work with h-, basis-, min-w-, max-w-, etc.

Flex Basis

basis-auto, basis-full, basis-{n}, basis-{fraction}

Order

Aspect Ratio

Position

Insets

top-{n}, right-{n}, bottom-{n}, left-{n} — uses the spacing scale. Negative values supported (-top-2, etc.).

Inset Shorthands

Negative values supported: -inset-x-4, -inset-y-2, -inset-4.

Z-Index

z-{n} — any integer, or arbitrary z-[50].

Overflow

Typography

Font Size

Arbitrary: text-[14] for 14pt, text-[12px], text-[1rem].

Font size with line height: text-sm/6 (line height from the spacing scale), text-sm/[1.4] (multiplier).

Font Weight

Font Family

Arbitrary: font-[Inter] for any registered font name. Custom families can be added via the theme (--font-{name}).

Font Style

Text Alignment

text-left, text-center, text-right, text-justify

Text Transform

uppercase, lowercase, capitalize, normal-case

Text Decoration

Decoration color: decoration-{color} (e.g. decoration-red-500)

Decoration style: decoration-solid, decoration-dashed, decoration-dotted, decoration-double, decoration-wavy

Text Overflow

Line Height

Spacing scale (absolute, like Tailwind v4): leading-6 → 18pt.

Arbitrary: leading-[1.2] (multiplier of the font size), leading-[18px] (absolute).

Multipliers behave like in CSS: they apply to the element's own font size, inherited or not, and a child with a different text-* size gets the same multiplier against its own size. A text-2xl heading inside a text-sm leading-relaxed page gets 1.625 × 24pt, not the page's line height.

Letter Spacing

em values are relative to the element's font size, like in Tailwind: tracking-widest on a text-xs label is narrower than on a heading.

Arbitrary: tracking-[0.2em], tracking-[2px], tracking-[1.5] (pt).

Text Indent

indent-{n} — uses the spacing scale.

Line Clamp

line-clamp-{n} — sets maxLines on the text element.

Colors

Besides the Tailwind palette, the default theme has the shadcn/ui semantic tokens (background, foreground, primary, muted, border, destructive…) and a chart palette: chart-1 to chart-5.

SVG fill & stroke

They work on SVG elements only.

Background

bg-{color}, bg-{color}/{opacity}

Text

text-{color}, text-{color}/{opacity}

Border

border-{color}, border-{color}/{opacity}

Alpha Modifier

Append /{0-100} to any color utility for alpha transparency:

<Block className="bg-blue-500/50" />   {/* 50% opacity blue */}<Text className="text-black/75" />     {/* 75% opacity black */}

Arbitrary Colors

Use [...] for any color value:

<Block className="bg-[#ff6600]" /><Text className="text-[rgb(100,200,50)]" />

Default Palette

The full Tailwind v4 color palette is included:

Grays: slate, gray, zinc, neutral, stone (50–950)

Colors: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose (50–950)

Special: transparent, black, white

Semantic Tokens

Pre-configured shadcn/ui tokens (light theme):

Usage: bg-primary, text-muted-foreground, border-border, etc.

Borders

Width

Style

border-solid, border-dashed, border-dotted

Per-side style: border-{t|r|b|l|x|y}-solid, border-{t|r|b|l}-dashed, border-{t|r|b|l}-dotted

Per-Side Color

border-{t|r|b|l|x|y}-{color} — applies color to one side (or two with x / y).

<Block className="border-t-red-500 border-b-blue-500" /><Block className="border-l-[#ff0000]" />

Radius

Side-specific: rounded-{t|b|l|r}-{size}, rounded-{tl|tr|bl|br}-{size}

Effects

Opacity

opacity-{0|5|10|15|...|95|100} — in 5% increments.

Object Fit & Position

For Image components:

Fit: object-contain, object-cover, object-fill, object-none, object-scale-down

Position: object-bottom, object-center, object-left, object-right, object-top

Transforms

Rotate

rotate-{deg} or rotate-[30] — value in degrees.

Scale

scale-{n}, scale-x-{n}, scale-y-{n} — value as percentage (e.g. scale-150 = 1.5x).

Translate

translate-x-{n}, translate-y-{n} — uses the spacing scale, output in pt.

Skew

skew-x-{deg}, skew-y-{deg} — value in degrees. Arbitrary: skew-x-[15].

Transform Origin

Transform Composition

Multiple transform utilities are automatically composed into a single transform string:

<Block className="rotate-45 scale-50" />{/* → transform: "rotate(45deg) scale(0.5)" */}
<Block className="rotate-45 scale-50 translate-x-4" />{/* → transform: "rotate(45deg) scale(0.5) translateX(12pt)" */}