Skip to content

## Tailwind ​

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

## Install ​

Install the component from your command line

pnpmbunnpmyarn
console

    pnpm add jsx-email

    pnpm add jsx-email

console

    bun add jsx-email

    bun add jsx-email

console

    npm add jsx-email

    npm add jsx-email

console

    yarn add jsx-email

    yarn add jsx-email

Our `Tailwind` component is lightning quick and extensible. No other email template system is as flexible or renders smaller with Tailwind styles. That's because we leverage the insanely fast and flexible UnoCSS project for Atomic CSS - including Tailwind and Windi CSS support. Not only do you get Tailwind support, but also the vast ecosystem of UnoCSS possibilities.

TIP

These are docs for the unified `jsx-email` package, and the Tailwind component contained within.

Docs for the deprecated `@jsx-email/tailwind` v3.0.0+ can be found at https://github.com/shellscape/jsx-email/blob/tailwind-v3.0.4/docs/components/tailwind.md

## Usage ​

Add the component around your email body content.

jsx

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

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

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

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

TIP

Note: Most email clients are style-limited and some styles may not work. It's always recommended to use `email check` to check your CSS for client compatibility.

## Component Props ​

ts

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

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

### Props ​

ts

    config?: UnoCssConfig;

    config?: UnoCssConfig;

This option allows customizing the theme for your template, using UnoCSS Configuration as well as UnoCSS `layers`, `presets`, `rules`, `separators`, `shortcuts`, and `variants`. See: Configuration for type and further information. For more information on theming and any of the other customization options, please see https://unocss.dev/config/.

ts

    production?: boolean;

    production?: boolean;

If true, any Tailwind class names will be converted to hashed names. e.g. The class `bg-purple-400` is transformed into `#ae387`, with an accompanying class in the associated `<style>` tag. This is adventageous as it reduces the overall size of the rendered email. In email, every byte counts towards your user's experience.

TIP

Gmail is one of the more restrictive email clients when it comes to CSS classes. When using the `<Tailwind/>` component, set the `production: true` prop for Gmail compatibility. The `Tailwind` component will hash and combine class names for compatibility with Gmail's rules.

## Tailwind Plugins ​

The `Tailwind` component isn't compatible with Tailwind Plugins out of the box. This is a side-effect of using UnoCSS for our Tailwind processor. However, UnoCSS does have a set of commonly-used equivalent core UnoCSS presets, Community Presets, and Transformers. While not entirely ideal for 1:1 Tailwind plugin support, complex rulesets and plugins are an unlikely need for formatting emails. If you'd like to port a Tailwind plugin to an UnoCSS present, there is documentation for that as well.

Should you find yourself in need of a Tailwind Plugin for an email template, please stop by our Discord Channel and we'll be happy to help you.