> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Tailwind

> A Vue component to wrap emails with Tailwind CSS.

## Install

Install component from your command line.

```sh npm theme={null}
npm install @vuemaildev/vuemail -E
```

```sh yarn theme={null}
yarn add @vuemaildev/vuemail -E
```

```sh pnpm theme={null}
pnpm add @vuemaildev/vuemail -E
```

## Getting started

> [!NOTE]
>
> This component uses Tailwind CSS 4, which comes with `@vuemaildev/vuemail`.

Add the component around your email body content.

```vue theme={null}
<script setup lang="ts">
import { Button, pixelBasedPreset, Tailwind, type TailwindConfig } from '@vuemaildev/vuemail';

const config: TailwindConfig = {
  presets: [pixelBasedPreset],
  theme: {
    extend: {
      colors: {
        brand: '#42b883',
      },
    },
  },
};
</script>

<template>
  <Tailwind :config="config">
    <Button
      href="https://example.com"
      class="bg-brand px-3 py-2 font-medium leading-4 text-white"
    >
      Click me
    </Button>
  </Tailwind>
</template>
```

## Props

**config** `object`

Customize the default theme for your project with the available properties in
[Tailwind docs](https://v3.tailwindcss.com/docs/theme), as a JavaScript configuration
object.

**theme** `string`

CSS with a Tailwind `@theme` block, the same you would write in your stylesheet with
Tailwind CSS 4, like `@theme { --color-brand: #42b883; }`.

**utility** `string`

CSS for utility classes of your own, like `.custom-shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }`,
which get inlined like any other utility.

> [!NOTE]
>
> Most email clients are style-limited and some styles may not work.
>
> One example of this is how Tailwind uses `rem` as its main unit for better accessibility. This
> is not supported by [some email clients](https://www.caniemail.com/features/css-unit-rem/), and
> the `pixelBasedPreset` changes it so that the styles are based on `16px` instead.

## Configuring with CSS

With Tailwind CSS 4, the theme can also be written in CSS. Pass it with the `theme` prop, and your
own utilities with the `utility` prop:

```vue theme={null}
<script setup lang="ts">
import { Section, Tailwind, Text } from '@vuemaildev/vuemail';

const theme = `
@theme {
  --color-brand: #42b883;
  --font-display: "Satoshi", sans-serif;
}
`;

const utility = `
.card-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
`;
</script>

<template>
  <Tailwind :theme="theme" :utility="utility">
    <Section class="card-shadow p-4">
      <Text class="font-display text-brand">Welcome aboard</Text>
    </Section>
  </Tailwind>
</template>
```

## Custom components

Tailwind classes on plain elements are inlined once the email is rendered, including the elements
rendered by components of your own, so these work inside `Tailwind` without any changes.

When a component needs the resolved styles while it renders, like `Button` does to compute its
Outlook fallbacks from the padding, use `useTailwind()`. Outside of `Tailwind`, it only normalizes
`class` and `style`.

```ts badge.ts theme={null}
import { defineComponent, h } from 'vue';
import { styleToString, useTailwind } from '@vuemaildev/vuemail';

export const Badge = defineComponent((_, { attrs, slots }) => {
  const resolveTailwind = useTailwind();

  return () => {
    const { style, class: className } = resolveTailwind(attrs.class, attrs.style);
    return h(
      'span',
      { class: className, style: styleToString(style) },
      slots.default?.(),
    );
  };
});
```

## Live example

> **[Tailwind Demo](https://demo.vuemail.dev/preview/Community/notifications/vercel-invite-user)**
>
> See the full demo and source code.

## Support

All components were tested using the most popular email clients.

![Gmail](https://vuemail.dev/static/icons/gmail.svg)

Gmail

![Apple Mail](https://vuemail.dev/static/icons/apple-mail.svg)

Apple Mail

![Outlook](https://vuemail.dev/static/icons/outlook.svg)

Outlook

![Yahoo! Mail](https://vuemail.dev/static/icons/yahoo-mail.svg)

Yahoo! Mail

![HEY](https://vuemail.dev/static/icons/hey.svg)

HEY

![Superhuman](https://vuemail.dev/static/icons/superhuman.svg)

Superhuman

## Known limitations

> **Responsive and other non-inlinable classes need a \<head>**
>
> Styles that can't be inlined, like media queries (`sm:`, `md:`), pseudo-classes (`hover:`, `focus:`)
> and `dark:`, are added to a `<style>` tag in the `<head>` of the email, and the classes are kept on
> the elements with email-safe names (`sm:p-8` becomes `sm_p-8`).
>
> That's why [`Head`](https://vuemail.dev/docs/components/head) needs to be inside of `Tailwind` when you use them. If it
> isn't, rendering throws an error that lists the classes that need a `<head>`:
>
> ```vue theme={null}
> <template>
>   <Html>
>     <Tailwind>
>       <Head />
>       <Body class="p-4 sm:p-8">
>         <!-- ... -->
>       </Body>
>     </Tailwind>
>   </Html>
> </template>
> ```
>
> Those styles only apply on the email clients that [support `<style>` tags](https://www.caniemail.com/features/html-style/).

> **No inlining for selectors that match more than a class**
>
> Only rules that look an element up by its classes get inlined. Utilities that resolve into
> relatively complex selectors, like the [`space-*` utilities](https://tailwindcss.com/docs/margin#adding-space-between-children)
> or `prose` from `@tailwindcss/typography`, use pseudo-classes such as `:where()` and `:not()`,
> so they go into the `<head>` too, instead of being inlined, and don't work on email clients that
> don't support `<style>` tags.

> **HTML inserted with v-html gets its classes inlined too**
>
> Vue renders the HTML you insert with `v-html` (or `innerHTML`) like the rest of the template, so
> `Tailwind` can't tell it apart: the classes of its elements get inlined too. React Email leaves
> raw HTML alone, so if you rely on that, keep the classes out of the HTML you insert.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.