Use Tailwind CSS to style PDFs created with react-pdf
Use Tailwind CSS to style PDFs created with react-pdf. This library essentially converts a compatible subset of the TailwindCSS class syntax into JS stylesheet objects that are compatible with react-pdf.
Try it yourself in the react-pdf-repl interactive playground.
As of v3, this library uses Tailwind v4. If you're upgrading from react-pdf-tailwind v2, you need to update your config to match the new structure (see usage). The config was changed slightly because of internal changes in Tailwind v4.
If you for some reason prefer Tailwind v3 syntax, stick with v2 of this library.
``jsx
import { Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer";
import { createTw } from "react-pdf-tailwind";
// Apply your own styles on top of Tailwind defaults
const tw = createTw({
fontFamily: {
sans: ["Papyrus"],
},
colors: {
custom: "#bada55",
},
});
export default function MyPdf() {
return (
);
}
`
More detailed examples can be found in the examples folder.
`js`
// Or pnpm, yarn...
npm install react-pdf-tailwind
The createTw function takes two arguments: the first is a theme config object, and the second is an optional options object with the following defaults.
The theme config contains your own styles and essentially gets merged into the defaultTheme object that Tailwind exposes. For reference, see the source.
`js`
const tw = createTw(
// Theme config
{
fontFamily: {
sans: ["Papyrus"],
},
spacing: {
verybig: "999rem",
},
colors: {
custom: "#bada55",
},
},
// Additional options (if needed)
{
// Set the base font size in points (see note below regarding units)
ptPerRem: 12,
}
);
In version 2.x, the config takes the same shape as in tailwind.config.js.
`js`
const tw = createTw(
// As in tailwind.config.js
{
theme: {
fontFamily: {
sans: ["Papyrus"],
},
extend: {
spacing: {
verybig: "999rem",
},
colors: {
custom: "#bada55",
},
},
},
}
);
- Supports most of the CSS properties that make sense in a PDF context, and are supported by react-pdf (see this list)pt
- Default font family classes are excluded, since you have to include your own fonts anyway
- Internally uses as the default unit (supported units can be found here), using the default convention 1rem = 12pt (this can be changed in the options)react-pdf
- Since 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