Install

Install component from your command line.

Getting started

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