Tailwind

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

Install

Install the component from your command line

pnpm add jsx-email

bun add jsx-email

npm add jsx-email

yarn add jsx-email

Usage

import { Button, Tailwind } from 'jsx-email';

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: '#007291'
            }
          }
        }
      }}
      production={true}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};

Props

TypeScript Interface

export interface TailwindProps {
  config?: UnoCssConfig;
  production?: boolean;
}

Optional Props

config

config?: UnoCssConfig;

UnoCSS configuration for customizing theme, layers, presets, rules, etc. See UnoCSS Configuration.

production

production?: boolean;

When true, hashes class names for better compatibility and smaller size (e.g., bg-purple-400 becomes #ae387).

Additional Information

Plugins Support

Need help porting a Tailwind plugin? Join our Discord.