tailwind-to-inline

KO | EN

gitlite — search

#react #typescript #llm #machine-learning #linux #macos #windows #awesome #kubernetes #pytorch #security #ios #openai #mcp

tailwind-to-inline

(★ 100)

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

tailwind-to-inline Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Tailwind to Inline styles converter

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

### [Try it online](https://tailwind-to-inline.vercel.app)

### Installation
`npm install tailwind-to-inline`

### Usage

#### From a file path

```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.

#### From a raw HTML string

```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.

### Example
#### Original template `welcome-email.html`:

```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
<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>
```

### Contributing

Contributions, issues, and feature requests are welcome!

### Contributors

### License

This project is MIT licensed.

tailwind-to-inline

tailwind-to-inline Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

tailwind-to-inline

tailwind-to-inline Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README