Core Concepts

Styling (Tailwind)

vue-pdf supports Tailwind CSS utility classes via the tw prop. Class strings are converted to vue-pdf Style objects using a pure-JS converter — no CSS engine, no runtime overhead.

Built-in — The tw prop works out of the box with @vuepdf/renderer. No extra install or import needed. Both tw and :style can be used together, and :style always wins when there's a conflict.

Quick Start

Use the tw prop on any vue-pdf component:

vue

<template>
  <Document>
    <Page size="A4" tw="p-10">
      <View tw="flex flex-row gap-4">
        <View tw="flex-1 p-4 bg-blue-100 rounded-lg">
          <Text tw="text-blue-500 font-medium">Card 1</Text>
        </View>
        <View tw="flex-1 p-4 bg-green-100 rounded-lg">
          <Text tw="text-green-500 font-medium">Card 2</Text>
        </View>
      </View>
    </Page>
  </Document>
</template>

How It Works

The tw prop accepts a space-separated string of Tailwind utility classes. At render time, the converter:

Splits the class string into individual utilities
Looks up each class against a vendored Tailwind theme (spacing, colors, fonts...)
Converts CSS units to PDF points (1rem = 12pt by default)
Emits a vue-pdf Style object merged under any inline :style

Units

All spacing/sizing utilities produce point values, not CSS units. The default conversion is 1rem = 12pt (matching 1rem = 16px at 72 DPI). This is configurable:

vue

<script setup>
import { createTw } from '@vuepdf/tailwind'

const myTw = createTw({}, { ptPerRem: 14 }) // 1rem = 14pt
</script>

Utility	Resolves To	Example
`p-4`	`{ padding: 12 }` (points)	4 × 12pt / 4 = 12pt
`w-1/2`	`{ width: '50%' }`	Fraction to percent
`w-full`	`{ width: '100%' }`	Full width
`p-px`	`{ padding: 1 }` (1 point)	1px ≈ 0.75pt, rounded to 1pt
`-mt-4`	`{ marginTop: -12 }`	Negative margin
`p-[10px]`	`{ padding: 10 }`	Arbitrary value

Supported Utilities

Layout & Flexbox

text

flex hidden
flex-row flex-col flex-row-reverse flex-col-reverse
flex-wrap flex-nowrap flex-wrap-reverse
flex-1 flex-auto flex-none
grow grow-0 shrink shrink-0
basis-1/2 basis-1/3 basis-1/4 basis-full
gap-4 gap-x-4 gap-y-2

Alignment

text

items-start items-center items-end items-stretch items-baseline
justify-start justify-center justify-end justify-between justify-around justify-evenly
content-start content-center content-end content-between content-around
self-auto self-start self-center self-end self-stretch self-baseline

Spacing

text

p-4 px-6 py-3 pt-4 pr-3 pb-2 pl-5
m-4 mx-6 my-3 mt-4 mr-3 mb-2 ml-5
-mt-2 -ml-4

Sizing

text

w-64 w-1/2 w-full w-auto w-screen w-min w-max w-fit
h-64 h-full h-auto h-screen h-min h-max h-fit
min-w-0 max-w-xl min-h-0 max-h-64

Positioning

text

absolute relative static
inset-0 inset-x-0 inset-y-0
top-0 right-0 bottom-0 left-0
z-10 z-50

Colors

text

bg-blue-500 bg-red-100 bg-green-700
text-white text-gray-900 text-slate-600
border-blue-300 border-red-500
decoration-green-500
fill-blue-400 stroke-red-500

Prop	Type	Default	Description
`Color format`	`HEX`	—	All colors are vendored as hex values (Tailwind v3 palette). oklch/hsl color spaces from Tailwind v4 are not supported.
`Custom colors`	`configureTw({ colors: {...} })`	—	Extend or override colors via theme configuration.
`Arbitrary`	`bg-[#bada55]`	—	Use bracket syntax for arbitrary color values.

Borders & Radius

text

border border-0 border-2 border-4 border-8
border-t border-r border-b border-l
border-solid border-dashed border-dotted
rounded rounded-md rounded-lg rounded-xl rounded-2xl rounded-3xl rounded-full
rounded-t-lg rounded-b-lg rounded-l-lg rounded-r-lg
rounded-tl-lg rounded-tr-lg rounded-bl-lg rounded-br-lg

Typography

text

text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl
font-thin font-light font-normal font-medium font-semibold font-bold font-extrabold font-black
italic not-italic
leading-3 leading-4 leading-5 leading-6 leading-7 leading-8 leading-9 leading-10
leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose
tracking-tighter tracking-tight tracking-normal tracking-wide tracking-wider tracking-widest
text-left text-center text-right text-justify
underline line-through no-underline
uppercase lowercase capitalize normal-case

Object Fit & Overflow

text

object-contain object-cover object-fill object-none object-scale-down
object-center object-top object-bottom object-left object-right
overflow-hidden

Combining tw and :style

The tw prop is the base layer and :style is the override layer. When a property appears in both, :style wins:

vue

<template>
  <Document>
    <Page size="A4">
      <!-- tw sets base styles; :style overrides individual properties -->
      <View tw="p-4 bg-blue-100 rounded-md" :style="{ paddingTop: 40 }">
        <Text tw="text-lg font-semibold text-blue-800">
          Padding top is 40pt, other sides are 12pt
        </Text>
      </View>
    </Page>
  </Document>
</template>

Custom Theme

Call configureTw() in your app entry point to extend or override the default theme:

vue

<script setup>
// Override theme defaults — use in app setup or nuxt.config
configureTw({
  colors: { brand: { 500: '#7c3aed', 700: '#6d28d9' } },
  extend: { spacing: { 18: '4.5rem' } },
})
</script>

<template>
  <Document>
    <Page size="A4">
      <View tw="p-18 bg-brand-500">
        <Text tw="text-white">Custom theme colors & spacing</Text>
      </View>
    </Page>
  </Document>
</template>

Limitations

Font families — font-sans, font-serif, font-mono map to generic families. Custom fonts must be registered with Font.register() first.
CSS Grid — Not supported. vue-pdf uses Yoga Layout (flexbox only).
Shadows & Transforms — Not supported in PDF. scale-*, rotate-*, and translate-* are on the roadmap (Phase 3).
Pseudo-classes — hover:, focus:, and dark: are not applicable. Responsive prefixes (sm:, md:, etc.) are in Phase 2.
Alpha / opacity — bg-blue-500/50 is not yet supported.

API Reference

Prop	Type	Default	Description
`tw()`	`(classes: string) => Style`	—	Convert a Tailwind class string to a vue-pdf Style object (default instance).
`createTw(theme?, options?)`	`(classes: string) => Style`	—	Create a custom converter with optional theme overrides and ptPerRem.
`configureTw(theme?, options?)`	`void`	—	Replace the global converter (used by the tw prop on all components).

Prop	Type	Default	Description
`TwTheme`	`object`	—	Theme overrides. Keys: colors, spacing, fontFamily, fontSize, fontWeight, borderRadius, borderWidth, opacity, zIndex, letterSpacing, lineHeight, maxWidth, extend.
`TwOptions`	`{ ptPerRem?: number }`	—	Converter options. ptPerRem defaults to 12.