JSPM

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

A React component to wrap emails with Tailwind CSS

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-email/tailwind) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    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 to your email template. Include styles where needed.

    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