Tailwind CSS support for PDFN
npm install @pdfn/tailwindTailwind CSS support for pdfn.
> Server-only — Tailwind processing runs during HTML generation, not in browsers.
``bash`
npm install @pdfn/tailwind
Wrap your template with :
`tsx
import { Document, Page } from '@pdfn/react';
import { Tailwind } from '@pdfn/tailwind';
function Invoice() { Thank you for your purchase.
return (
Invoice
);
}
`
Create pdfn-templates/styles.css for custom fonts and colors. This file is isolated from your app's styles — your app and PDF templates never interfere with each other.
`css
/ pdfn-templates/styles.css /
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import "tailwindcss";
@theme {
--font-inter: "Inter", var(--font-sans);
--color-brand: #007bff;
}
`
Auto-detected when you use .
@pdfn/tailwind works on Node.js but not on edge runtimes (no filesystem).
For Vercel Edge or Cloudflare Workers, add a build plugin:
`bashNext.js
npm i @pdfn/next
See @pdfn/next or @pdfn/vite for setup.
MIT