電子メール対応 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: フロントエンドとバックエンド。