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 convention1rem = 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 tocolumn
, which can be fixed by adding theflex-row
class where needed) - Modifiers like breakpoints (which could technically make sense) aren't supported yet