React Email Tailwind

This content is not available in your language yet.

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

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

Param	Type	Default Value	Remark
config	object		Customize the default theme for your project with the available properties in Tailwind docs.