@useprint/tailwind
v0.1.3
Published
A React component to wrap documents with Tailwind CSS
Readme
@useprint/tailwind
A React wrapper that applies Tailwind classes to Useprint documents.
Install
npm install @useprint/tailwind tailwindcssGetting started
import { Body, Document, Head, Page } from '@useprint/components';
import { Tailwind } from '@useprint/tailwind';
export default function Proposal() {
return (
<Tailwind>
<Document>
<Head />
<Body>
<Page className="bg-white p-10 text-slate-900">
<h1 className="text-3xl font-semibold">Proposal</h1>
</Page>
</Body>
</Document>
</Tailwind>
);
}Important note
If your Tailwind output contains styles that cannot be fully inlined, the component needs a <head> in the tree so it can inject a <style> tag. In practice, that usually means rendering the Head component inside your document.