Components
Tailwind
A React component to wrap emails with Tailwind CSS.
Install
Install component from your command line.
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
config
object
Customize the default theme for your project with the available properties in Tailwind docs.
Note: Most email clients are style-limited and some styles may not work.
Live example
Tailwind Demo
See the full demo and source code.
Support
All components were tested using the most popular email clients.
Gmail
Apple Mail
Outlook
Yahoo! Mail
HEY
Superhuman