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 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>
);
}More detailed examples can be found in the examples folder.
Installation
// Or pnpm, yarn...
npm install react-pdf-tailwindNotes
- 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
ptas the default unit (supported units can be found here), using the convention1rem = 12pt - Since
react-pdfuses Yoga internally, some defaults differ from the web standard (for example,flex-directiondefaults tocolumn, which can be fixed by adding theflex-rowclass where needed) - Modifiers like breakpoints (which could technically make sense) aren't supported yet