React PDF Tailwind

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

Example

import React from "react";
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>
  );
}

Installation

npm install @chrissantamaria/react-pdf-tailwind

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 convention 1rem = 12pt
• Modifiers like breakpoints (which could technically make sense) aren't supported yet