Tailwind

Install

Install component from your command line.

npm install @vuemaildev/vuemail -E

yarn add @vuemaildev/vuemail -E

pnpm add @vuemaildev/vuemail -E

Getting started

This component uses Tailwind CSS 4, which comes with @vuemaildev/vuemail.

Add the component around your email body content.

<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

object

Customize the default theme for your project with the available properties in Tailwind docs, as a JavaScript configuration object.

string

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

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.

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, 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:

<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.

badge.ts

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

See the full demo and source code.

Support

All components were tested using the most popular email clients.

Gmail

Apple Mail

Outlook

Yahoo! Mail

HEY

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 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>:

<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.

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 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.

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Install

Getting started

Props

Configuring with CSS

Custom components

Live example

Tailwind Demo

Support

Known limitations

​Install

​Getting started

​Props

​Configuring with CSS

​Custom components

​Live example

Tailwind Demo

​Support

​Known limitations

Install

Getting started

Props

Configuring with CSS

Custom components

Live example

Support

Known limitations