JSPM

  • Created
  • Published
  • Downloads 3940643
  • Score
    100M100P100Q8780F
  • License MIT

A React component to wrap emails with Tailwind CSS

Package Exports

  • @react-email/tailwind

Readme

React Email Tailwind cover

@react-email/tailwind
A React component to wrap emails with Tailwind CSS.

Install

Install component from your command line.

With yarn

yarn add @react-email/tailwind -E

With npm

npm install @react-email/tailwind -E

Getting started

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>
  );
};

Support

This component was tested using the most popular email clients.

Gmail logo Apple Mail Outlook logo Yahoo! Mail logo HEY logo Superhuman logo
Gmail ✔ Apple Mail ✔ Outlook ✔ Yahoo! Mail ✔ HEY ✔ Superhuman ✔

License

MIT License