Generating Email Styles with Tailwind CSS

Magento email templates use LESS for styling. This guide shows how to generate LESS-compatible email stylesheets from Tailwind CSS utility classes. You'll write email styles using familiar Tailwind classes and the @apply directive, then use PostCSS to compile them into plain CSS, which is output as a LESS file for Magento's email system.

Prerequisites

Before starting, complete the email styling preparation steps in the Styling Emails documentation. All file paths below are relative to your theme folder (app/design/frontend/Vendor/ThemeName).

Configuration Steps

Step 1: Create the Emails Directory

Create a dedicated directory for email-related Tailwind configuration:

mkdir web/tailwind/emails

Step 2: Create the PostCSS Configuration

Create web/tailwind/emails/postcss.config.js. This PostCSS configuration uses a dedicated Tailwind config for email compilation:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss')({ config: './emails/tailwind.email.config.js' }),
  ]
}

Step 3: Create the Email-Specific Tailwind Configuration

Create web/tailwind/emails/tailwind.email.config.js. This extends your theme's Tailwind config and disables RGBA color functions, as Magento's LESS processor requires HEX color values:

const defaultConfig = require('../tailwind.config.js');

module.exports = {
  ...defaultConfig,
  corePlugins: {
    backdropOpacity: false,
    backgroundOpacity: false,
    borderOpacity: false,
    divideOpacity: false,
    ringOpacity: false,
    textOpacity: false
  }
};

Step 4: Install PostCSS CLI

Install the PostCSS command-line interface as a development dependency:

npm install --save-dev postcss-cli

Step 5: Add the Build Script

Add the email build script to your theme's web/tailwind/package.json:

"build-email": "npx postcss --config ./emails theme/email.css -o ../css/source/_theme.less"

This script reads source CSS from theme/email.css and outputs compiled LESS to web/css/source/_theme.less, overwriting the base file you copied during email styling preparation.

Usage Example

Create the source file web/tailwind/theme/email.css with Tailwind utility classes using @apply:

.footer {
   @apply border-t-2 border-primary;
   .span {
       @apply bg-primary;
   }
}

Run the build command to generate the LESS output:

npm run build-email

The generated web/css/source/_theme.less file contains compiled CSS with HEX color values:

.footer {
  border-top-width: 2px;
  border-color: #DEDEDE;
}

.footer .span {
  background-color: #001F43;
}

To verify email styling, use the Yireo Email Tester 2 extension to preview transactional emails.

Known Limitations and Workarounds

Custom Background Images with LESS Variables

When using LESS variables in background image URLs, wrap the URL path in single quotes to ensure proper LESS processing:

background-image: url('@{baseDir}css/background/illustration_1.svg');

Border Utility Classes

Some Tailwind border utilities like border-b and border-t may not compile correctly for email use. As a workaround, combine Tailwind utilities with explicit border declarations:

.main-links a {
    @apply text-primary-headings border-bom_colors-charcoal-dark;
    border-bottom: 1px solid;
}