Components
Tailwind
A Vue component to wrap emails with Tailwind CSS.
Usage
Add the component to your email template. Include class where needed.
<script setup>
import { EButton, ETailwind } from 'vue-email'
const tailwindConfig = {
theme: {
extend: {
colors: {
primary: '#007291',
},
},
},
}
</script>
<template>
<ETailwind :config="tailwindConfig">
<EButton href="https://example.com" class="bg-primary px-3 py-2 font-medium leading-4 text-white">
Click me
</EButton>
</ETailwind>
</template>
Config
The ETailwind component accepts a config prop that allows you to customize the default theme for your email with the available properties in Tailwind docs.
you can also pass the tailwind config to the config as shown here
3th party plugins might not work, as the SSR renderer handles compiling emails differently.
Props
config
object
Customize the default theme for your project with the available properties in Tailwind docs.