Tailwindからインラインスタイルへの変換ツール

Tailwind CSSクラスをメール対応のHTMLテンプレート用のインラインスタイルに変換します。

オンラインで試す

インストール

使い方

#### ファイルパスから変換する場合

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

パラメータ:

• templatePath — テンプレートファイルへのパス。
• placeholderValues (オプション) — テンプレート内の動的コンテンツを置き換えるためのキーと値のペアのオブジェクト。

import { makeStylesInlineFromString } from 'tailwind-to-inline';
const html = 
Hello, {{name}}
;
const htmlTemplate = await makeStylesInlineFromString(html, {
  name: 'John',
});

パラメータ:

• templateString — Tailwind CSSクラスを含む生のHTML文字列。
• data (オプション) — テンプレート内の動的コンテンツを置換するためのキーと値のペアのオブジェクト。

例

  
    

      Welcome, {{name}}
    
    

      
        {{cta_text}}
      
    
  

#### 変換結果:

  
    

      Welcome, John
    
    

      
        Complete Profile
      
    
  

貢献について

貢献、問題報告、機能リクエストを歓迎します！

コントリビューター

ライセンス

このプロジェクトはMITライセンスの下で提供されています。

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