Tailwind to React-PDF

A library that converts React components styled with Tailwind CSS and Shadcn UI into PDFs using React-PDF.

Installation

``bash
npm install tailwind-to-reactpdf
`

Features

- Convert React components with Tailwind CSS classes to PDF
- Support for Shadcn UI components
- PDF viewer and download link components
- Customizable style mapping
- Support for custom components

Usage

$3

`jsx
import React from 'react';
import { TailwindToPDFViewer, TailwindToPDFDownloadLink } from 'tailwind-to-reactpdf';

const MyPDFComponent = () => {
return (

{/ PDF Viewer /}

My PDF Document

This content will be rendered as a PDF with Tailwind styles.

{/ Download Link /}
label={Download PDF}
filename="my-document.pdf"
>

Downloadable PDF

Click the button to download this content as a PDF.

);
};
`

$3

You can provide custom style mappings for Tailwind classes:

`jsx
import { TailwindToPDFViewer } from 'tailwind-to-reactpdf';

const MyComponent = () => {
const customStyleMap = {
'my-custom-class': { color: 'purple', fontSize: 24 },
'brand-button': { backgroundColor: '#FF5733', padding: 10, borderRadius: 5 }
};

return (





);
};
`

$3

You can provide custom components to be used in the PDF rendering:

`jsx
import { TailwindToPDFViewer } from 'tailwind-to-reactpdf';
import { Text, View } from '@react-pdf/renderer';

const MyComponent = () => {
const customComponents = {
'CustomHeading': ({ children, style }) => (
{children}
),
'CustomCard': ({ children, style }) => (

{children}

)
};

return (





);
};
`

$3

The library includes built-in support for common Shadcn UI components:

`jsx
import { TailwindToPDFViewer } from 'tailwind-to-reactpdf';
import { Button, Card, Input } from 'tailwind-to-reactpdf/components';

const MyComponent = () => {
return (





);
};
``

API Reference

$3

A component that renders a PDF viewer with the converted content.

Props:

- children : React nodes to be converted to PDF
- includeDefaultStyles : Boolean to include default Tailwind style mappings (default: true)
- customStyleMap : Object with custom Tailwind class to React-PDF style mappings
- customComponents : Object with custom component mappings

$3

A component that renders a download link for the PDF.

Props:

- children : React nodes to be converted to PDF
- label : React node to be rendered as the download link
- filename : String for the downloaded file name (default: 'document.pdf')
- includeDefaultStyles : Boolean to include default Tailwind style mappings (default: true)
- customStyleMap : Object with custom Tailwind class to React-PDF style mappings
- customComponents : Object with custom component mappings

License

MIT