Tailwind
A React component to wrap emails with Tailwind CSS.
Install
Install component from your command line.
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
Customize the default theme for your project with the available properties in Tailwind docs.
Most email clients are style-limited and some styles may not work.
One example of this is how Tailwind will uses rem
as it’s main unit for better accessbility.
This is not going to be supported by some email clients
and we recommend that you define a Tailwind config to override these if you care
about the support for those email clients. We will not do this ourselves, though.
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