A React component to wrap emails with Tailwind CSS
npm install @react-email/tailwindInstall component from your command line.
#### With yarn
``sh`
yarn add @react-email/tailwind -E
#### With npm
`sh`
npm install @react-email/tailwind -E
Add the component around your email body content.
`jsx
import { Button } from "@react-email/button";
import { Tailwind } from "@react-email/tailwind";
const Email = () => {
return (
theme: {
extend: {
colors: {
"custom-color": "#ff0000",
},
},
},
}}
>
className="text-custom-color bg-white mx-auto"
>
Click me
);
};
`
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