Skip to content
hono-email

Tailwind

View as Markdown

If you are using the <Tailwind> component, we recommend using a bundler together with the EmailTailwind plugin from @hono-email/tailwind-plugin.

The plugin is built using unplugin, which allows it to support arbitrary bundlers out of the box, including Vite, Webpack, Rollup, Esbuild, Rolldown, Farm, Rspack, and Bun.

Installation

Section titled “Installation”

Install the tailwind-plugin package:

Terminal window
npm i -D @hono-email/tailwind-plugin

Bundler setup

Section titled “Bundler setup”

Vite

Section titled “Vite”
vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import EmailTailwind from '@hono-email/tailwind-plugin/vite'


export default defineConfig({
  plugins: [tailwindcss(), EmailTailwind()],
})

Webpack (CommonJS config)

Section titled “Webpack (CommonJS config)”
webpack.config.cjs
const EmailTailwind = require('@hono-email/tailwind-plugin/webpack').default


module.exports = {
  plugins: [EmailTailwind()],
}

The plugin automatically finds <Tailwind> components and injects Tailwind styles.

Usage in templates

Section titled “Usage in templates”
import { Body, Head, Html, Tailwind, Text, render } from 'hono-email'


const { html } = await render(
  <Html>
    <Head />
    <Tailwind>
      <Body>
        <Text className="text-brand bg-brand px-4 py-2">Hello</Text>
      </Body>
    </Tailwind>
  </Html>,
)

How utilities are handled

Section titled “How utilities are handled”
  • Base utilities are inlined as style attributes.
  • Responsive utilities such as sm: are relocated into <head>.
  • Single-element pseudo-class variants such as hover: and focus: are kept in <head> with email-safe renamed class names (hover:bg-blue-500 → hover-bg-blue-500).
  • Combinator variants such as group-hover: and peer-* are not supported and are dropped with a warning.

Excluding emails from frontend Tailwind

Section titled “Excluding emails from frontend Tailwind”

When using Tailwind for frontend styling, we recommend using @source with not to exclude emails from being scanned by the frontend Tailwind build:

@import 'tailwindcss';


@source not "./emails";

Passing an artifact explicitly

Section titled “Passing an artifact explicitly”

If you are not using a bundler plugin, use buildTailwindArtifactFromCss():

import { Body, Head, Html, Tailwind, Text, buildTailwindArtifactFromCss, render } from 'hono-email'


const artifact = buildTailwindArtifactFromCss({
  css: `
    @layer utilities {
      .bg-brand { background-color: #0f172a; }
      .text-white { color: #ffffff; }
      .px-4 { padding-left: 1rem; padding-right: 1rem; }
      .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    }
  `,
})


const { html } = await render(
  <Html>
    <Head />
    <Tailwind artifact={artifact}>
      <Body>
        <Text className="bg-brand text-white px-4 py-2">Hello</Text>
      </Body>
    </Tailwind>
  </Html>,
)

API Reference

Section titled “API Reference”

TailwindProps

Section titled “TailwindProps”
export type TailwindProps = {
  artifact?: TailwindBuildArtifact
  children: Child
}

artifact Optional

Section titled “artifact ”

Type: TailwindBuildArtifact

Build artifact containing parsed utility CSS rules. When not using the bundler plugin, you must pass this artifact explicitly using buildTailwindArtifactFromCss().

children Required

Section titled “children ”

Type: Child

The child elements to apply Tailwind styling to.