Tailwind to Inline styles converter

Converts Tailwind CSS classes to inline styles in email templates.

Package 96 stars GitHub

Tailwind to Inline styles converter

Converts Tailwind CSS classes to inline styles for email-ready HTML templates.

Try it online

Installation

npm install tailwind-to-inline

Usage

From a file path

import { makeStylesInline } from 'tailwind-to-inline';

const htmlTemplate = await makeStylesInline('templates/welcome-email.html', {
  name: 'John',
  cta_text: 'Complete Profile'
});

Parameters:

templatePath — Path to the template file.
placeholderValues (optional) — A key-value pair object to replace dynamic content in the template.

From a raw HTML string

import { makeStylesInlineFromString } from 'tailwind-to-inline';

const html = `<div class="pt-10 text-yellow-300">Hello, {{name}}</div>`;
const htmlTemplate = await makeStylesInlineFromString(html, {
  name: 'John',
});

Parameters:

templateString — A raw HTML string containing Tailwind CSS classes.
data (optional) — A key-value pair object to replace dynamic content in the template.

Example

Original template `welcome-email.html`:

<html>
  <body class="bg-gray-800">
    <div class="pt-10 mb-4 pl-4 max-w-[512px] relative z-20">
      <span class="mr-5 text-yellow-300">Welcome, {{name}}</span>
    </div>
    <div>
      <a href="https://example.com/complete-profile" class="bg-blue-500">
        {{cta_text}}
      </a>
    </div>
  </body>
</html>

Converted result:

<html>
  <body style="background-color: #1f2937;">
    <div style="position: relative; z-index: 20; max-width: 512px; margin-bottom: 1rem; padding-left: 1rem; padding-top: 2.5rem;">
      <span style="margin-right: 1.25rem; color: #fde047;">Welcome, John</span>
    </div>
    <div>
      <a href="https://example.com/complete-profile" style="background-color: #3b82f6;">
        Complete Profile
      </a>
    </div>
  </body>
</html>