Tailwindをstyle属性へ変換【mailwind】

1 挨拶
2 mailwind
3 環境構築
- 3.1 mailwind Setup
- 3.2 Example：before → after
4 おわり

挨拶

ども！ちょっと休暇をとって温泉地に移動中の龍ちゃんです。2泊3日で温泉を堪能する予定です。

今回は、だいぶ特殊な要件：「Tailwindを純粋なCSS Styleのみに変換したい」を満たす内容でニッチすぎる内容になっています。僕はHTMLメールをTailwindから書きたいという部分から始まりました。

mailwind

Tailwindで表現したHTMLをstyleに変換して出力してくれるライブラリが「mailwind」になります。こちらのライブラリは、HTMLファイルを解析して以下のことができます。

CSSファイル出力
Inline-CSS形式で記述されたHTML形式ファイル出力

参考

GitHub – soheilpro/mailwind: Use Tailwind CSS to design HTML emails.

GitHub

環境構築

すでにHTML + Tailwindでコーディングをできる環境は整っている前提で進めていきます。もし整っていない方は、以下の記事を参考にして自分なりの環境を整えてください。

2022-10-21 Tailwind環境をシンプルに構築 :Tailwind

シンプルなTailwind環境構築を効率的に改革　[ Visual Studio Code Browser-Sync ]

2022-10-25 シンプルなTailwind環境構築を効率的に改革 Browsery Sync

mailwind Setup

環境のセットアップはとても簡単に完了します。

npm install mailwind

こちらのコマンドだけでインストールは終了です。次に実行コマンドについて記載しています。mailwindでは、入力として二つのファイルを受け取ることができます。

入力	解説
—input-html	Tailwindで記載されているHTMLファイル ※必須
—tailwind-config	Tailwindの設定ファイル（デフォルトでtailiwnd.config.jsになっている）

出力としては、以下の二つになります。

出力	解説
—output-html	入力で受け取ったHTMLファイルにinline-style形式で追記されたファイル
—output-css	入力で受け取ったHTMLファイルで定義されているTailwindクラスのCSSファイル

出力はどちらか一方でも、両方でも値として渡すことができます。両方渡してもあんまり意味ないですけどね。

参考のコマンドです。

# inline cssのみ
mailwind --input-html public/input.html --output-html output.html

# CSS ファイルのみ生成
mailwind --input-html public/input.html --output-css style.css

# inline-style:html css両方作成
mailwind --input-html public/mail.html --output-html output.html --output-css style.css

Example：before → after

出力の結果をサンプルとして置いています。

こちらをtailwind形式で記載したファイルが以下になります。

<div class="flex flex-row items-center justify-start gap-4 w-full p-10 flex-wrap">
  <div class="inline-flex w-52 flex-col gap-2 p-2 rounded-md bg-white shadow">
    <h2 class="text-lg font-bold">まっすぐ歩く</h2>
    <p class="text-green-500">実行中</p>
  </div>
  <div class="font-bold text-2xl">→</div>
  <div class="inline-flex w-52 flex-col gap-2 p-2 rounded-md bg-white shadow">
    <h2 class="text-lg font-bold">右に曲がる</h2>
    <p class="text-red-500">実行終了</p>
  </div>
</div>

こちらをmailwindを用いてinline-style形式に変換したのが以下になります。

<div class="flex flex-row items-center justify-start gap-4 w-full p-10 flex-wrap" style="display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 16px; padding: 40px;">
  <div class="inline-flex w-52 flex-col gap-2 p-2 rounded-md bg-white shadow" style="display: inline-flex; width: 208px; flex-direction: column; gap: 8px; border-radius: 0.375rem; background-color: #fff; padding: 8px; --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);">
    <h2 class="text-lg font-bold" style="font-size: 18px; font-weight: 700;">まっすぐ歩く</h2>
    <p class="text-green-500" style="color: #22c55e;">実行中</p>
  </div>
  <div class="font-bold text-2xl" style="font-size: 24px; font-weight: 700;">→</div>
  <div class="inline-flex w-52 flex-col gap-2 p-2 rounded-md bg-white shadow" style="display: inline-flex; width: 208px; flex-direction: column; gap: 8px; border-radius: 0.375rem; background-color: #fff; padding: 8px; --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);">
    <h2 class="text-lg font-bold" style="font-size: 18px; font-weight: 700;">右に曲がる</h2>
    <p class="text-red-500" style="color: #ef4444;">実行終了</p>
  </div>
</div>

ファイルを見ていただいたらわかる通り、必要な情報がすべてHTMLに乗っています。

試したけどできなかったこと
tailwind.configで記載しているGoogle Fontsの情報はロードされませんでした。ただ、定義した追加・自作のTailwindに関しては反映されていました。どうしても使用したい場合は、HTML側に記載しておくなどの対応が必要そうです