Components
Tailwind
A Vue component to wrap emails with Tailwind CSS.
Install
Install component from your command line.
pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/tailwind
Getting started
Add the component to your email template. Include styles where needed.
<script setup lang="ts">
import { Tailwind, Button } from "@vue-email/components";
</script>
<template>
<Tailwind
:config="{
theme: {
extend: {
colors: {
brand: '#007291',
},
},
},
}"
>
<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.
Most email clients are style-limited and some styles may not work.
One example of this is how Tailwind uses
We can’t really apply this configuration for you as it would have a few drawbacks. In the future, we will probably provide a preset to remediate this. But, for now, here’s a good starter configuration you can use to avoid these issues:
One example of this is how Tailwind uses
rem as its main unit for better accessibility. This is not supported by some email clients, if you want you can override the Tailwind config.
We can’t really apply this configuration for you as it would have a few drawbacks. In the future, we will probably provide a preset to remediate this. But, for now, here’s a good starter configuration you can use to avoid these issues:
import type { TailwindConfig } from "@vue-email/tailwind";
export default {
theme: {
fontSize: {
xs: ["12px", { lineHeight: "16px" }],
sm: ["14px", { lineHeight: "20px" }],
base: ["16px", { lineHeight: "24px" }],
lg: ["18px", { lineHeight: "28px" }],
xl: ["20px", { lineHeight: "28px" }],
"2xl": ["24px", { lineHeight: "32px" }],
"3xl": ["30px", { lineHeight: "36px" }],
"4xl": ["36px", { lineHeight: "36px" }],
"5xl": ["48px", { lineHeight: "1" }],
"6xl": ["60px", { lineHeight: "1" }],
"7xl": ["72px", { lineHeight: "1" }],
"8xl": ["96px", { lineHeight: "1" }],
"9xl": ["144px", { lineHeight: "1" }],
},
spacing: {
px: "1px",
0: "0",
0.5: "2px",
1: "4px",
1.5: "6px",
2: "8px",
2.5: "10px",
3: "12px",
3.5: "14px",
4: "16px",
5: "20px",
6: "24px",
7: "28px",
8: "32px",
9: "36px",
10: "40px",
11: "44px",
12: "48px",
14: "56px",
16: "64px",
20: "80px",
24: "96px",
28: "112px",
32: "128px",
36: "144px",
40: "160px",
44: "176px",
48: "192px",
52: "208px",
56: "224px",
60: "240px",
64: "256px",
72: "288px",
80: "320px",
96: "384px",
},
},
} satisfies TailwindConfig;