​
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

Currently adding a context’s provider inside of the Tailwind component, won’t allow you to properly call the useContext in any of the children of it, due to some technical limitations regarding on how we currently map the classNames into styles.The current workaround for this right now is to move the context’s provider higher than the Tailwind component, so that all children inside Tailwind can properly call useContext with the context.
We do not yet support prose, and beyond that, we don’t yet support classes that might be resolved into selectors that are relatively complex. That is, selectors with more than a class lookup.This is because we optimistically look into the selectors for class names and look these up later on the elements, and since prose, by using more complicated selectors, cannot be directly inlined without matching the selectors to the elements, it isn’t able to match the selectors appropriately.This also means some other utilities do not work either, like the space-* utility.The only exception for this inlining of styles is with media queries, as they are not inlinable. We do not do the same for hover: styles though, but since their support is not best, you probably won’t need it.In the future, we will be inlining all the styles we can by actually matching the selectors against the elements themselves.