---
title: "Send emails using React and Tailwind CSS"
slug: tailwind-with-react-email
description: "Build beautiful emails with Tailwind CSS and React Email."
created_at: "2023-03-12"
updated_at: "2025-02-26"
image: https://cdn.resend.com/posts/tailwind-with-react-email.jpg
humans: ["zeno-rocha"]
category: "product"
---

Libraries like [React](https://reactjs.org) and [Tailwind CSS](https://tailwindcss.com) 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](https://tailwindcss.com) with [React Email](https://react.email) to build beautiful emails without having to write any CSS.

<blockquote>
  "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."
  <div class="quote-metadata">
    <div class="quote-avatars">
      <div class="quote-avatar">
        <img
          alt="Narative"
          src="https://cdn.resend.com/posts/logo-narative.jpg"
          width="40"
          height="40"
        />
      </div>
      <div class="quote-avatar quote-avatar-author">
        <img
          alt="Thiago Costa"
          src="/static/avatars/thiago-costa.jpg"
          width="40"
          height="40"
        />
      </div>
    </div>
    <span class="quote-author">
      <span class="quote-author-name">Thiago Costa</span>
      <span class="quote-author-job">Co-founder of Fey and Narative</span>
    </span>
  </div>
</blockquote>

## What is React Email again?

[React Email](https://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](https://react.email/docs) or watching this amazing video from [Chris Pennington](https://twitter.com/cpenned):

<YouTube videoId="MdO1AKVTkLI" />

## How to use Tailwind CSS with React Email

We recommend using [create-email](https://www.npmjs.com/package/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:

```jsx
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](https://tailwindcss.com/docs/theme).

<blockquote>
  "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."
  <div class="quote-metadata">
    <div class="quote-avatars">
      <div class="quote-avatar">
        <img
          alt="Warp"
          src="https://cdn.resend.com/posts/logo-warp.jpg"
          width="40"
          height="40"
        />
      </div>
      <div class="quote-avatar quote-avatar-author">
        <img
          alt="Adam Rankin"
          src="/static/avatars/adam-rankin.jpg"
          width="40"
          height="40"
        />
      </div>
    </div>
    <span class="quote-author">
      <span class="quote-author-name">Adam Rankin</span>
      <span class="quote-author-job">Founding Engineer at Warp</span>
    </span>
  </div>
</blockquote>

## Live example

If you want to see a live example, check out the [Vercel template using Tailwind](https://demo.react.email/preview/vercel-invite-user).

![Vercel template using Tailwind](https://cdn.resend.com/posts/tailwind-with-react-email-1.jpg)

## Thanks

The [Tailwind CSS integration](https://react.email/docs/components/tailwind) wouldn't be possible without the help of our incredible open source community. A special thanks to [Vinicius de Moraes](https://github.com/vinicoder), who led the initial implementation and fixed several issues along the way.