Send emails using React and Tailwind CSS

Build beautiful emails with Tailwind CSS and React Email.

Zeno RochaZeno Rocha
Send emails using React and Tailwind CSS

Libraries like React and Tailwind CSS have made it easier to build modern websites. However, when it comes to emails, we were still stuck with old-school HTML and CSS.

Today we're excited to announce that you can now use Tailwind CSS with React Email to build beautiful emails without having to write any CSS.

"Resend not only streamlines our emails to accommodate our expanding customer base, but their team also offered valuable hands-on support during the transition from our old API. Their product is visually stunning and seamlessly integrates with React Email."

Narative
Thiago Costa
Thiago CostaCo-founder of Fey and Narative

What is React Email again?

React Email is an open source set of unstyled components maintained by our team to help you build beautiful emails without having to deal with <table> layouts and maintaining archaic HTML code.

If you're new to React Email, I highly recommend checking out the getting started guide or watching this amazing video from Chris Pennington:

How to use Tailwind CSS with React Email

We recommend using create-email, which is the easiest way to get started:

npx create-email@latest

This will create a new folder called "react-email-starter" with a few email templates.

Now, import the component around your email body:

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


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

You can customize the default theme with the available properties in Tailwind CSS docs.

"As of our last deployment all of our emails are using Resend. We are loving the development experience of React Email - not having to leave my dev environment to develop new emails is a game-changer."

Warp
Adam Rankin
Adam RankinFounding Engineer at Warp

Live example

If you want to see a live example, check out the Vercel template using Tailwind.

Vercel template using Tailwind
Vercel template using Tailwind

Thanks

The Tailwind CSS integration wouldn't be possible without the help of our incredible open source community. A special thanks to Vinicius de Moraes, who led the initial implementation and fixed several issues along the way.