This package has been deprecated

Author message:

The project has moved to a single package. Please install `jsx-email` for further updates

@jsx-email/tailwind

A JSX email component which enables using Tailwind CSS to style emails.

@jsx-email/tailwind Documentation

Requirements

This package requires an LTS Node version (v18.0.0+) and React v18.2.0+.

Install

pnpm add @jsx-email/tailwind

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/tailwind
# yarn add @jsx-email/tailwind

Usage

We recommend using the @jsx-email/cli for creating new templates.

Create an email template file (e.g. Email.tsx) and import the component:

import { Button } from '@jsx-email/button';
import { Tailwind } from '@jsx-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>
  );
};

Please see the @jsx-email/tailwind Documentation for props and additional usage information.

Attribution 🧡

This package was built upon prior work for react-email by Bu Kinoshita (@bukinoshita) and Zeno Rocha (@zenorocha).

License

MIT License