@hono-email/tailwind-plugin
v0.8.1
Published
Bundler plugin for Tailwind integration with hono-email.
Downloads
175
Maintainers
hayatoscReadme
@hono-email/tailwind-plugin
@hono-email/tailwind-plugin is a build-time bundler plugin supporting Vite, Rollup, Rolldown, Webpack, Esbuild, Farm, and Bun. It compiles and injects Tailwind CSS styles dynamically into <Tailwind> components for hono-email.
Full documentation is available at hono-email.hayatosc.dev.
Setup
npm i -D @hono-email/tailwind-pluginConfiguration
Register the plugin in your bundler configuration file.
Vite
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import EmailTailwind from '@hono-email/tailwind-plugin/vite'
export default defineConfig({
plugins: [tailwindcss(), EmailTailwind()],
})Webpack
// webpack.config.cjs
const EmailTailwind = require('@hono-email/tailwind-plugin/webpack').default
module.exports = {
plugins: [EmailTailwind()],
}Usage
Once configured, wrap your templates with the <Tailwind> component. The bundler plugin will automatically process and inject the Tailwind styles at build time.
import { Body, Head, Html, Tailwind, Text, render } from 'hono-email'
const { html } = await render(
<Html>
<Head />
<Tailwind>
<Body>
<Text className="text-blue-600 bg-gray-50 px-4 py-2">Hello World</Text>
</Body>
</Tailwind>
</Html>,
)Documentation
For other bundler integrations (Rollup, Rolldown, Esbuild, Farm, Bun) and styling options, please check the Documentation Site.