Tailwind CSS for PDFs

Writing style objects for PDFs gets tedious fast:

<View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 16, backgroundColor: '#f8fafc', borderRadius: 8 }}>
  <Text style={{ fontSize: 18, fontWeight: 700, color: '#1e293b' }}>Invoice</Text>
  <Text style={{ fontSize: 14, color: '#64748b' }}>Draft</Text>
</View>

If you already think in Tailwind, you should be able to write PDFs the same way. Now you can.

@formepdf/tailwind

npm install @formepdf/tailwind

The package exports a single function, tw(), that converts Tailwind class strings into Forme style objects:

import { tw } from '@formepdf/tailwind';

<View style={tw("flex-row justify-between p-4 bg-slate-50 rounded-lg")}>
  <Text style={tw("text-lg font-bold text-slate-900")}>Invoice</Text>
  <Text style={tw("text-sm text-slate-500")}>Draft</Text>
</View>

Same result, half the characters.

What's supported

The goal is to cover the Tailwind utilities that make sense for PDF layout. No responsive prefixes (sm:, md:), no hover states, no dark mode -- those don't exist in PDFs. But everything else you'd reach for is there:

Spacing -- p-4, px-6, mt-8, m-auto, and all the side variants. Values follow Tailwind's 4px scale.

Typography -- text-sm through text-9xl, font-bold, italic, text-center, leading-tight, tracking-wide, uppercase, underline, line-through.

Colors -- The full Tailwind palette. All 22 color families (slate through rose) with shades 50-950. Works for text (text-blue-600), backgrounds (bg-slate-100), and borders (border-red-200).

Layout -- flex-row, flex-col, items-center, justify-between, flex-1, flex-wrap, gap-4, self-center. Dimensions: w-64, h-full, min-w-0, max-w-96.

Grid -- grid, grid-cols-3, grid-rows-2, col-span-2, col-start-1, row-span-full. Build dashboard layouts just like you would on the web.

Borders -- border, border-2, border-t, rounded-lg, rounded-full.

Positioning -- relative, absolute, top-4, right-0, overflow-hidden.

Opacity -- opacity-50, opacity-75.

Negative values

Prefix with - to negate:

tw("-mt-4")  // → { marginTop: -16 }
tw("-top-2") // → { top: -8 }

Pull elements up with negative margin, offset absolutely positioned elements -- the same patterns you use in web development.

Fraction widths

Use fractions for percentage-based sizing:

tw("w-1/2") // → { width: "50%" }
tw("w-2/3") // → { width: "66.666667%" }
tw("w-1/4") // → { width: "25%" }

Arbitrary values

When Tailwind's scale doesn't have the exact value you need, use bracket syntax:

tw("w-[200]")       // → { width: 200 }
tw("text-[14px]")   // → { fontSize: 14 }
tw("p-[20]")        // → { padding: 20 }
tw("bg-[#ff6b35]")  // → { backgroundColor: "#ff6b35" }
tw("opacity-[0.85]")// → { opacity: 0.85 }

The px suffix is stripped automatically. Colors are detected by the # prefix.

Grid layouts

CSS Grid works naturally:

<View style={tw("grid grid-cols-3 gap-4")}>
  <View style={tw("col-span-2 p-4 bg-blue-50 rounded-lg")}>
    <Text style={tw("text-sm font-medium")}>Revenue</Text>
    <Text style={tw("text-2xl font-bold")}>$45,231</Text>
  </View>
  <View style={tw("p-4 bg-emerald-50 rounded-lg")}>
    <Text style={tw("text-sm font-medium")}>Growth</Text>
    <Text style={tw("text-2xl font-bold text-emerald-600")}>+12%</Text>
  </View>
</View>

Merging with custom styles

tw() returns a plain object. Spread it, merge it, override individual properties:

<View style={{ ...tw("p-4 bg-white rounded-lg"), borderWidth: 1, borderColor: '#e2e8f0' }}>

No runtime, no build step

@formepdf/tailwind is a pure function. It doesn't scan your files, generate CSS, or require a build step. It's a string-to-object converter that runs anywhere JavaScript runs -- Node, the browser, edge runtimes.

There's no unused style purging because there are no stylesheets. Each tw() call produces exactly the styles it needs, nothing more.

Get started

npm install @formepdf/tailwind @formepdf/react @formepdf/core

Full reference: docs.formepdf.com/tailwind