​
Tailwind

Support

Client-side
Server-side

​
Examples

​
Preview

import { Tailwind } from "@onedoc/react-print";

<Tailwind>
  <div className="bg-gradient-to-tr from-blue-500 to-blue-700 rounded-2xl p-12"></div>
  <p className="py-12 text-slate-800">
    This is a Tailwind component. All children of this component will have
    access to the Tailwind CSS classes.
  </p>
</Tailwind>;

​
Custom Tailwind config

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

import { Tailwind } from "@onedoc/react-print";

<Tailwind
  config={{
    theme: {
      extend: {
        colors: {
          primary: "#6484cf",
        },
      },
    },
  }}
>
  <div className="bg-primary p-12 rounded-2xl"></div>
  <p className="py-12 text-slate-800">
    This is a Tailwind component. All children of this component will have
    access to the Tailwind CSS classes.
  </p>
</Tailwind>;

​
API

Props
children
React.ReactNode
required

The children of the Tailwind component. Components will have access to the Tailwind CSS classes.

config
any

A custom Tailwind config to use for this component. See all available options at https://tailwindcss.com/docs/configuration

NB: The content option is automatically set to the children of the Tailwind component.

Was this page helpful?

SignatureVariables