掌握電子郵件就緒 HTML：使用 Tailwind CSS 進行自動樣式內聯

In the world of email development, ensuring consistent styling across various email clients is a significant challenge. Email clients are notoriously inconsistent in their CSS support. Many strip out tags or ignore external stylesheets. So ensuring consistent appearance across various email clients often requires inline CSS styles. This requirement can conflict with modern development practices, especially when using utility-first CSS frameworks like Tailwind.

Recently, while working on a project that required sending various emails to users, I faced this exact dilemma. We were using Tailwind for our main application, and I wanted to maintain this efficient workflow for our email templates as well. However, the need for inline styles in emails posed a significant hurdle.

I considered several approaches:

Creating email templates with inline styles from the start.

Pros: Guaranteed compatibility with email clients. Cons: Time-consuming to write and maintain, prone to errors, and incompatible with Tailwind. Using online converters to transform Tailwind-styled templates into inline styles. Then, save the HTML with inline styles as a separate file to be sent via email.

Pros: Allows use of familiar Tailwind syntax during development. Cons: Requires keeping two versions of each template (original and converted). Utilizing an npm package to convert templates to inline styles at runtime.

Pros: It’s time-efficient and allows me to maintain only one version of each email template using Tailwind. Cons: I did come across some packages like tailwind-to-css or tw-to-css, but while they have their merits, I encountered the following issues:

❌ tailwind-to-css generates random class names in the result HTML ❌ tw-to-css requires calling a converter function for every Tailwind class usage.

After evaluating these options and finding existing tools lacking, I decided to implement a custom solution. In this article, I’ll guide you through the development of a TypeScript module that automates the process of inlining Tailwind classes for email-ready HTML.

I want to highlight that the code actually runs on the Node.js server, so I aimed to use the bare minimum from the frontend world necessary to make the logic work.

Actual implementation

The main logic is resided in makeStylesInline function:

export const makeStylesInline: TMakeStylesInline = async ( templatePath, data, ) => { const templateSource = fs.readFileSync(templatePath, 'utf8'); const template = Handlebars.compile(templateSource); const html = template(data); return inlineStyles(html); }; 登入後複製

This function takes a template path and optional data, compiles the template with Handlebars, and processes the resulting HTML to inline styles.

Harnessing the Power of Tailwind CSS

A key component is the processTailwindCSS function, which applies Tailwind CSS to our HTML:

const processTailwindCSS = async (html: string): Promise => { const tailwindConfig = { content: [{ raw: html, extension: 'html' }], corePlugins: { preflight: false, }, };

const result = await postcss([ tailwindcss(tailwindConfig), autoprefixer, ]).process('@tailwind components; @tailwind utilities;', { from: undefined, });

return result.css; }; 登入後複製

This function sets up a minimal Tailwind configuration and uses PostCSS to generate the necessary CSS.

Simplifying and Optimizing CSS for Emails

Given the limited CSS support in email clients, the simplifyColors function optimizes the generated CSS:

const simplifyColors = (css: string): string => { const generalSimplifications = css .replace(/rgb$([^)]+)$ \/ var$--tw-[^)]+$/g, 'rgb($1)') .replace( /rgba$([^,]+),([^,]+),([^,]+),var\(--tw-[^)]+$\)/g, 'rgba($1,$2,$3,1)' ) .replace(/var$--tw-[^)]+$/g, '1') .replace(/--tw-[^:]+:[^;]+;/g, '');

return generalSimplifications.replaceAll( /(rgba?$\d+\s+\d+\s+\d+\s*\/.*$)/g, (match) => rgbToHex(match) ); }; 登入後複製

This function removes Tailwind-specific CSS variables and converts RGB colors to hexadecimal for better email client support.

The Art of Style Inlining

For the actual inlining process, we use the juice library:

const inlineStyles = async (html: string): Promise => { const tailwindCss = await processTailwindCSS(html); const simplifiedCss = simplifyColors(tailwindCss);

return juice(html, { extraCss: simplifiedCss, applyStyleTags: true, removeStyleTags: true, preserveMediaQueries: true, preserveFontFaces: true, preserveImportant: true, inlinePseudoElements: true, }); }; 登入後複製

This function processes the HTML with Tailwind, simplifies the resulting CSS, and then uses juice to inline the styles. It preserves important structures like media queries and font faces.

Handling Dynamic Content with Handlebars

The solution integrates Handlebars for template compilation, allowing for dynamic content insertion:

const templateSource = fs.readFileSync(templatePath, 'utf8'); const template = Handlebars.compile(templateSource); const html = template(data); 登入後複製

This approach enables the use of placeholder values in email templates, enhancing flexibility and reusability.

Conclusion

This TypeScript code offers an automated solution for generating email-ready HTML with inlined styles. By leveraging Tailwind CSS, PostCSS, and careful CSS optimization, it significantly streamlines the email development process. The result is consistently styled, cross-client compatible email HTML, generated with minimal manual intervention.

For developers looking to improve their email development workflow, this solution provides a robust starting point. It combines the utility-first approach of Tailwind CSS with the practicality of automated style inlining, all while maintaining the flexibility needed for dynamic email content.

For the full source code and more detailed implementation, visit the GitHub repository.

需要注意的是，這是該解決方案的版本 1，因此，它可能無法涵蓋所有可能的用例或具有所有所需的功能。總是有改進和擴展的空間，我歡迎在專案中嘗試此解決方案的開發人員提供回饋。

感謝您的閱讀！如果您有任何疑問或需要澄清，請隨時聯繫。

隨時了解最新的 JavaScript 和軟體開發新聞！加入我的 Telegram 頻道以獲取更多見解和討論 ：TechSavvy：前端和後端。