Tailwind Email Preset: Optimized HTML Emails

Overview:

The Tailwind CSS Preset for Email is a configuration preset optimized for creating HTML emails using Tailwind CSS. It adapts utility classes to values better supported by email clients and includes plugins for generating useful utilities specific to email design.

Customization:

Users can override the preset by configuring Tailwind as usual. This includes adjusting themes and screen sizes.

Configuration Adjustments

• Screens: Desktop-first approach with max-width values.
• Spacing, BorderRadius, and FontSize: Updated to use px values.
• fontFamily: Simplified to web-safe fonts only.
• BoxShadow and DropShadow: Uses exact values for better support.

Plugins

• tailwindcss-mso: Generates Outlook-specific classes.
• tailwindcss-box-shadow: Generates box-shadow utilities.
• tailwindcss-email-variants: Provides email-specific targeting hacks.
• Custom Plugins: Generates border-spacing, text-decoration, and filter utilities with static values.

How to Use:

Install via npm and configure the preset in tailwind.config.js.

npm install tailwindcss-preset-email

// tailwind.config.js
module.exports = {
  presets: [
    require('tailwindcss-preset-email'),
  ],
};