Use Tailwind CSS to style PDFs created with react-pdf
Use Tailwind CSS to style PDFs created with react-pdf.
Try it yourself in the react-pdf-repl interactive playground.
``jsx
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 (
);
}
`
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 Tailwind config object (which currently only looks at the theme settings), and the second is an optional options object with the following defaults:
`js`
const tw = createTw(
// Tailwind config
{
theme: ...
},
// Additional options
{
// Set the base font size in points (see note below regarding units)
ptPerRem: 12,
}
);
- 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