​
Install

Install component from your command line.

npm install @react-email/components -E

# or get the individual package

npm install @react-email/tailwind -E

​
Getting started

The current tailwindcss version used for this component is 3.4.10

Add the component around your email body content.

import { Tailwind, Button } from "@react-email/components";

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: "#007291",
            },
          },
        },
      }}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};

​
Props

​
config
object

Customize the default theme for your project with the available properties in Tailwind docs.

Most email clients are style-limited and some styles may not work.

One example of this is how Tailwind uses rem as its main unit for better accessibility. This is not supported by some email clients, if you want you can override the Tailwind config.

We can’t really apply this configuration for you as it would have a few drawbacks. In the future, we will probably provide a preset to remediate this. But, for now, here’s a good starter configuration you can use to avoid these issues:

​
Live example

Tailwind Demo

See the full demo and source code.

​
Support

All components were tested using the most popular email clients.

Gmail

Apple Mail

Outlook

Yahoo! Mail

HEY

Superhuman

​
Known limitations