Tailwind

Support

Client-side
Server-side

Preview

Use a simple Tailwind tag to support Tailwind in your document.

1import { Tailwind } from "@fileforge/react-print";
2
3<Tailwind>
4  <div className="bg-gradient-to-tr from-blue-500 to-blue-700 rounded-2xl p-12"></div>
5  <p className="py-12 text-slate-800">
6    This is a Tailwind component. All children of this component will have
7    access to the Tailwind CSS classes.
8  </p>
9</Tailwind>;

Examples

Custom Tailwind config

You can also pass a custom Tailwind config to the Tailwind component.

1import { Tailwind } from "@fileforge/react-print";
2
3<Tailwind
4  config={{
5    theme: {
6      extend: {
7        colors: {
8          primary: "#6484cf",
9        },
10      },
11    },
12  }}
13>
14  <div className="bg-primary p-12 rounded-2xl"></div>
15  <p className="py-12 text-slate-800">
16    This is a Tailwind component. All children of this component will have
17    access to the Tailwind CSS classes.
18  </p>
19</Tailwind>;

Disable Preflight

You can disable the Tailwind Preflight CSS.

1import { Tailwind } from "@fileforge/react-print";
2
3<Tailwind
4  config={{
5    corePlugins: {
6      preflight: false,
7    },
8  }}
9>
10  <div className="bg-primary p-12 rounded-2xl"></div>
11  <h1>Level 1 Header</h1>
12  <p className="text-slate-800">
13    This is a Tailwind component. All children of this component will have
14    access to the Tailwind CSS classes.
15  </p>
16</Tailwind>;