import { Tabs, TabItem, Badge } from '@astrojs/starlight/components'
If you are using the `` component, we recommend using a bundler together with the `EmailTailwind` plugin from `@hono-email/tailwind-plugin`.
The plugin is built using [unplugin](https://github.com/unjs/unplugin), which allows it to support arbitrary bundlers out of the box, including Vite, Webpack, Rollup, Esbuild, Rolldown, Farm, Rspack, and Bun.
## Installation
Install the tailwind-plugin package:
```sh
npm i -D @hono-email/tailwind-plugin
```
```sh
yarn add -D @hono-email/tailwind-plugin
```
```sh
pnpm add -D @hono-email/tailwind-plugin
```
```sh
bun i -D @hono-email/tailwind-plugin
```
## Bundler setup
### Vite
```tsx
// 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)
```js
// webpack.config.cjs
const EmailTailwind = require('@hono-email/tailwind-plugin/webpack').default
module.exports = {
plugins: [EmailTailwind()],
}
```
The plugin automatically finds `` components and injects Tailwind styles.
## Usage in templates
```tsx
import { Body, Head, Html, Tailwind, Text, render } from 'hono-email'
const { html } = await render(
Hello
,
)
```
## How utilities are handled
- Base utilities are inlined as `style` attributes.
- Responsive utilities such as `sm:` are relocated into ``.
- Single-element pseudo-class variants such as `hover:` and `focus:` are kept in `` 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
When using Tailwind for frontend styling, we recommend using `@source` with `not` to exclude emails from being scanned by the frontend Tailwind build:
```css
@import 'tailwindcss';
@source not "./emails";
```
## Passing an artifact explicitly
If you are not using a bundler plugin, use `buildTailwindArtifactFromCss()`:
```tsx
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(
Hello
,
)
```
## API Reference
## TailwindProps
```ts
export type TailwindProps = {
artifact?: TailwindBuildArtifact
children: Child
}
```
#### `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`
**Type:** `Child`
The child elements to apply Tailwind styling to.