Skip to content

React Email Tailwind

This content is not available in your language yet.

Install

Install component from your command line.

Terminal window
npm install @react-email/components -E
# or get the individual package
npm install @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

ParamTypeDefault ValueRemark
configobjectCustomize the default theme for your project with the available properties in Tailwind docs.