Tailwind - React Email

import Support from '/snippets/support.mdx'

Install

Install component from your command line.

npm install @react-email/components -E

# or get the individual package

npm install @react-email/tailwind -E

yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/tailwind -E

pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/tailwind -E

</CodeGroup>

Getting started

<Info>The current tailwindcss version used for this component is 4.1.12</Info>

Add the component around your email body content.

jsx

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

<ResponseField name="config" type="object"> Customize the default theme for your project with the available properties in [Tailwind docs](https://v3.tailwindcss.com/docs/theme). </ResponseField> <Info> 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](https://www.caniemail.com/features/css-unit-rem/), and
the `pixelBasedPreset` changes it so that the styles are based on `16px` instead.

</Info>

Live example

<Card title="Tailwind Demo" icon="arrow-up-right-from-square" iconType="duotone" href="https://demo.react.email/preview/notifications/vercel-invite-user"

See the full demo and source code. </Card>

Known limitations

<AccordionGroup> <Accordion title="No support for contexts inside the component"> 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. </Accordion> <Accordion title="No support for prose from @tailwindcss/typography"> 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. </Accordion> </AccordionGroup>