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 = 
Hello, {{name}}
;
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:

  
    

      Welcome, {{name}}
    
    

      
        {{cta_text}}
      
    
  

#### Converted result:

  
    

      Welcome, John
    
    

      
        Complete Profile
      
    
  

Contributing

Contributions, issues, and feature requests are welcome!

Contributors

License

This project is MIT licensed.

--- Tranlated By Open Ai Tx | Last indexed: 2026-06-09 ---