tailwind-to-inline - GitLite

KO | EN

gitlite — search

#ai #typescript #go #android #rust #linux #nodejs #java #windows #awesome-list #security #pytorch #ios #open-source

tailwind-to-inline

(★ 100)

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

File Explorer

Download Latest Version (.zip)

- - globals.css
  - layout.tsx
  - page.tsx
- .gitignore
- next.config.ts
- package.json
- tsconfig.json
- vercel.json
- - example-template.html
- - makeStylesInline.test.ts
  - makeStylesInline.ts
  - rgbToHex.ts
  - types.ts
.gitignore
.prettierrc.json
eslint.config.mjs
index.ts
jest.config.js
package-lock.json
package.json
README.md
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/vardan-arm/tailwind-to-inline

Downloads the entire project code from GitHub to your computer.

cd tailwind-to-inline

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

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

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

### License

This project is MIT licensed.