​
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, pixelBasedPreset, Button } from "@react-email/components";

const Email = () => {
  return (
    <Tailwind
      config={{
        presets: [pixelBasedPreset],
        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, and the pixelBasedPreset changes it so that the styles are based on 16px instead.

​
Live example

Tailwind Demo

See the full demo and source code.

​
Support

All components were tested using the most popular email clients.
GmailGmail
Apple MailApple Mail
OutlookOutlook
Yahoo! MailYahoo! Mail
HEYHEY
SuperhumanSuperhuman

​
Known limitations