React PDF Tailwind

Use Tailwind CSS to style PDFs created with react-pdf.

Try it yourself in the react-pdf-repl interactive playground.

Example

import { Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer";
import { createTw } from "react-pdf-tailwind";

// The 'theme' object is your Tailwind theme config
const tw = createTw({
  theme: {
    fontFamily: {
      sans: ["Comic Sans"],
    },
    extend: {
      colors: {
        custom: "#bada55",
      },
    },
  },
});

export default function MyPdf() {
  return (
    <Document>
      <Page size="A4" style={tw("p-12 font-sans")}>
        <View style={tw("p-20 bg-gray-100")}>
          <Text style={tw("text-custom text-3xl")}>Section #1</Text>
        </View>
        <View style={tw("mt-12 px-8 rotate-2")}>
          <Text style={tw("text-amber-600 text-2xl")}>Section #2</Text>
        </View>
      </Page>
    </Document>
  );
}

More detailed examples can be found in the examples folder.

Installation

// Or pnpm, yarn...
npm install react-pdf-tailwind

Usage

The createTw function takes two arguments: the first is a Tailwind config object (which currently only looks at the theme settings), and the second is an optional options object with the following defaults:

const tw = createTw(
  // Tailwind config
  {
    theme: ...
  },
  // Additional options
  {
    // Set the base font size in points (see note below regarding units)
    ptPerRem: 12,
  }
);

Notes

• Supports most of the CSS properties that make sense in a PDF context, and are supported by react-pdf (see this list)
• Default font family classes are excluded, since you have to include your own fonts anyway
• Internally uses pt as the default unit (supported units can be found here), using the default convention 1rem = 12pt (this can be changed in the options)
• Since react-pdf uses Yoga internally, some defaults differ from the web standard (for example, flex-direction defaults to column, which can be fixed by adding the flex-row class where needed)
• Modifiers like breakpoints (which could technically make sense) aren't supported yet