@react-email/tailwind
Advanced tools
Install component from your command line.
yarn add @react-email/tailwind -E
npm install @react-email/tailwind -E
Add the component around your email body content.
import { Button } from "@react-email/button";
import { Tailwind } from "@react-email/tailwind";
const Email = () => {
return (
<Tailwind
config={{
theme: {
extend: {
colors: {
"custom-color": "#ff0000",
},
},
},
}}
>
<Button
href="https://example.com"
className="text-custom-color bg-white mx-auto"
>
Click me
</Button>
</Tailwind>
);
};
These are some things you will need to keep in mind if you are improving the Tailwind component with things that might influence certain decisions we have made for better email client support that have been made also in the past by other contributors but not documented which ended up causing us to have these problems and need to rediscover the best decisions again.
This is one of the most important because this is not one of the use cases this is the main focus point of using the Tailwind component. The support for defining styles with tags and using classes is not the best.
This though can't be used the same for media queries so we do append the media queries
and the class names associated with them on a <style> tag on the <head> element.
This is also something we need to keep in mind here, emails don't really have great support for CSS variables, so we needed to use a postcss plugin alongisde Tailwind to resolve all of these variables.
For media queries we have made more than one decision that are for the better. The first one
and most important is sanitizing the media query class names on the <style> tag to avoid
needing to escape the class names which does cause problems.
For the best support two things were taken into account here. First thing is that
the syntax using spaces, which Tailwind generally uses, is not really supported,
neither for rgb nor for rgba, so we do a pass through Tailwind's generated
styles to change the syntax into using commas instead of spaces.
Second thing is that both rgba and using / for defining the color's opacity
are not very well supported, but passing in the opacity as a fourth parameter of rgb()
is what is mostly supported so we also account for that.
This has an effect like the following:
rgb(255 255 255 / 1) -> rgb(255,255,255)
rgb(212 213 102 / 0.2) -> rgb(212,213,102,0.2)
style propThis is something that comes a bit at the risk of performance but it is a safer way of doing this. The reason this is safer is because certain components of ours or even custom ones may modify the way styles are applied and defining it directly on the rendered HTML would cause unexpected behavior on that.
This component was tested using the most popular email clients.
 |  |  |  |  |  |
|---|---|---|---|---|---|
| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
MIT License
FAQs
A React component to wrap emails with Tailwind CSS
We found that @react-email/tailwind demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.