tailwind-to-inline
Version:
Convert HTML templates with Tailwind CSS classes to inline styles. Ideal for email templates, making Tailwind-styled emails compatible with major email clients.
94 lines (67 loc) • 2.48 kB
Markdown
Converts Tailwind CSS classes to inline styles for email-ready HTML templates.
`npm install tailwind-to-inline`
```js
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.
```js
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.
```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>
```
```html
<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>
```
Contributions, issues, and feature requests are welcome!
<a href="https://github.com/vardan-arm"><img src="https://github.com/vardan-arm.png" width="50" height="50" alt="vardan-arm" /></a>
<a href="https://github.com/diogomoretti"><img src="https://github.com/diogomoretti.png" width="50" height="50" alt="diogomoretti" /></a>
<a href="https://github.com/markosmk"><img src="https://github.com/markosmk.png" width="50" height="50" alt="markosmk" /></a>
This project is MIT licensed.