https://github.com/steveninety/svelte-email-tailwind
Code, preview and test-send email templates with Svelte and Tailwind classes and render them to HTML or plain text.
https://github.com/steveninety/svelte-email-tailwind
Last synced: about 2 months ago
JSON representation
Code, preview and test-send email templates with Svelte and Tailwind classes and render them to HTML or plain text.
- Host: GitHub
- URL: https://github.com/steveninety/svelte-email-tailwind
- Owner: steveninety
- License: mit
- Created: 2023-11-12T10:13:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-16T08:17:35.000Z (3 months ago)
- Last Synced: 2025-02-16T09:18:06.957Z (3 months ago)
- Language: Svelte
- Homepage:
- Size: 1020 KB
- Stars: 32
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome - steveninety/svelte-email-tailwind - Code, preview and test-send email templates with Svelte and Tailwind classes and render them to HTML or plain text. (Svelte)
README
Svelte Email Tailwind
Develop emails easily in Svelte using Tailwind.
# Introduction
SVELTE 5 COMPATIBLE since version 2.0.0!
`svelte-email-tailwind` enables you to code, preview and test-send email templates with Svelte and Tailwind classes and render them to HTML or plain text.
- This package adds a Tailwind post-processor to the original [svelte-email](https://github.com/carstenlebek/svelte-email) package.
- Tailwind classes are converted to inline styles on built-time using a Vite plugin.
- In earlier versions, this process took place every time an email was sent (not very efficient).
- This package also provides a Svelte preview component, including utility functions for the server (SvelteKit only).
# Installation
Install the package to your existing Svelte + Vite or SvelteKit project:
```bash title="npm"
npm install svelte-email-tailwind
```
```bash title="pnpm"
pnpm install svelte-email-tailwind
```
# Getting started
## 1. Configure Vite
Import the svelteEmailTailwind Vite plugin, and pass it into the config's `plugins` array.
`vite.config.ts`
```ts
import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';
import svelteEmailTailwind from 'svelte-email-tailwind/vite';
const config: UserConfig = {
plugins: [
sveltekit(),
svelteEmailTailwind() // processes .svelte files inside the default '/src/lib/emails' folder
]
};
export default config;
```
Optional configurations:
- Provide a Tailwind config;
- Provide a custom path to your email folder.
```js
import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';
import type { TailwindConfig } from 'tw-to-css';
import svelteEmailTailwind from 'svelte-email-tailwind/vite';
const emailTwConfig: TailwindConfig = {
theme: {
screens: {
md: { max: '767px' },
sm: { max: '475px' }
},
extend: {
colors: {
brand: 'rgb(255, 62, 0)'
}
}
}
};
const config: UserConfig = {
plugins: [
sveltekit(),
svelteEmailTailwind({
tailwindConfig: emailTwConfig,
pathToEmailFolder: '/src/lib/components/emails' // defaults to '/src/lib/emails'
})
]
};
export default config;
```
## 2. Create an email using Svelte
`src/lib/emails/Hello.svelte`
```svelte
import { Button, Hr, Html, Text, Head } from 'svelte-email-tailwind';
export let name = 'World';