Tailwind から CSS への変換ツール
Tailwind ユーティリティを CSS 宣言に展開。
このツールについて
このツールは、よく使われる Tailwind のユーティリティを CSS の規則ブロックに展開します。hover: や md: のようなバリアントは、専用のセレクターやメディアクエリが必要になるため注記として表示されます。
使い方
コンポーネントからクラスをコピーして変換を実行し、生成された宣言をスタイルシートに移すか、デザイントークンと見比べてください。未対応のユーティリティは注記に残ります。
例
初期状態の例では、レイアウトと余白の基本的なユーティリティを使っています。
入力
flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semibold出力
.element {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
/* …mapped declarations… */
}ヒント
ユーティリティの裏側にある CSS を学びたいときや、CSS 層を併用しているチームに向いています。
知っておきたいこと
どの Tailwind クラスに対応していますか?
実用的な一部に対応しています。display と position、flex の配置、padding・margin・gap・サイズの余白スケール、フォントサイズと太さ、border-radius、いくつかのシャドウ、grid 列、不透明度、z-index、よく使う色の短いリスト、w-[320px] や bg-[#38bdf8] のような任意値です。それ以外は推測せず、メモに一覧表示します。
hover: や md: などのバリアントはどうなりますか?
メモで指摘されるだけで、展開はされません。バリアントには宣言を囲むセレクターやメディアクエリが必要なので、スタイルシート側で手動で囲んでください。