CSS to TailwindCSSコンバータは、従来のCSSコードを自動的にTailwind CSSユーティリティクラスに変換できるプロフェッショナルなスタイル移行ツールです。ネストされた構文、メディアクエリ、擬似クラスなどの複雑なシーンをサポートします。プロジェクトの移行を行うフロントエンド開発者、Tailwind CSS構文を学習する人、またはスタイルコードを迅速にリファクタリングする人に適しています。
主な機能
スマート構文変換
標準的なCSSプロパティを対応するTailwind CSSユーティリティクラスに自動的にマッピングします。変換エンジンは padding、margin、color、font-size などの一般的なCSSプロパティを認識し、p-4、ml-4、text-blue-500、text-smなどのクラス名を生成できます。
ネスト構文サポート
SCSS/Sassスタイルのネストされた構文をサポートします。処理できるもの:
- ネストされたセレクタ(
&:hover、&.active) - ネストされたメディアクエリ(
@media) - @supports機能クエリ
- 擬似要素と擬似クラス
これにより、複雑な現代的なCSSコードを正確に変換できます。
Tailwind設定統合
カスタムTailwind設定ファイルをサポートし、変換時に参照されます:
- カスタムカラー:拡張されたcolors設定が認識され、変換に使用されます
- カスタムブレークポイント:screens設定がメディアクエリ変換に使用されます
- カスタム間隔:spacing設定がpadding、marginなどに使用されます
- @supports機能:supports設定が機能クエリに使用されます
これにより、変換結果がプロジェクトのTailwind設定と一致することが保証されます。
rem/px単位変換
remからpxへの変換オプションを提供します(デフォルト1rem = 16px)、プロジェクトのニーズに基づいて基準値を調整可能です。rem単位を使用するプロジェクトの場合、コンバータは自動的に最も近いTailwind間隔単位に計算します。
リアルタイムプレビュー
左側のエディタにCSSコードを入力すると、右側に変換されたTailwindクラス名がリアルタイムで表示されます。エディタはシンタックスハイライトとコードフォーマットをサポートし、変換効果の比較と検証に便利です。
適用シーン
プロジェクト移行
既存のプロジェクトを従来のCSSまたはBootstrapからTailwind CSSに移行する際、ツールを使用してスタイルコードを一括変換し、手動での書き直し作業負荷を大幅に削減します。中大規模プロジェクトのスタイルリファクタリングに適しています。
Tailwind CSSの学習
初心者は慣れ親しんだCSSコードを入力し、変換結果を観察してTailwind CSSのクラス名ルールと命名規則を学習します。これは直感的で効率的な学習方法で、CSSプロパティとTailwindクラスの対応関係を迅速に確立できます。
迅速なプロトタイプ開発
デザインファイルから抽出したCSSスタイルを迅速にTailwindクラス名に変換し、プロトタイプ開発プロセスを加速します。デザイナーがCSSコードを提供するコラボレーションシーンに特に適しています。
スタイル最適化
冗長なCSSコードを簡潔なTailwindクラスに変換し、TailwindCSSのアトミック性を活用してスタイルの重複を減らし、最終的なバンドルサイズを最適化します。
変換例
基本スタイル
入力CSS:
.button {
padding: 0.875rem 1rem;
margin-left: 16px;
text-align: center;
font-size: 12px;
color: #3b82f6;
}
変換結果:
<div class="py-3.5 px-4 ml-4 text-center text-xs text-blue-500">
レスポンシブデザイン
入力CSS:
.container {
width: 100%;
@media (min-width: 768px) {
width: 750px;
}
@media (min-width: 1024px) {
width: 970px;
}
}
変換結果:
<div class="w-full md:w-[750px] lg:w-[970px]">
擬似クラス状態
入力CSS:
.link {
color: #3b82f6;
&:hover {
color: #1d4ed8;
text-decoration: underline;
}
}
変換結果:
<a class="text-blue-500 hover:text-blue-700 hover:underline">
設定説明
Tailwind設定例
ツールはデフォルトのサンプル設定を提供し、プロジェクトの実際のニーズに基づいて変更可能です:
{
"content": [],
"theme": {
"extend": {
"colors": {
"custom-color": {
"100": "#123456",
"gold": "hsl(41, 28.3%, 79.8%)"
}
},
"screens": {
"custom-screen": { "min": "768px", "max": "1024px" }
}
},
"supports": {
"grid": "display: grid",
"flex": "display: flex"
}
}
}
設定後、ツールはカスタムカラーcustom-color-100、custom-color-goldおよびカスタムブレークポイントcustom-screen:を認識します。
remInPxオプション
rem単位変換のベースラインを制御します。nullに設定するとrem単位を保持して変換せず、数値(例:16)に設定するとremを対応するpx値に変換してからTailwindクラスにマッピングします。
注意事項
変換の制限
一部の複雑なCSS機能はTailwindクラスに完全に変換できない場合があります:
- 複雑なCSS関数(calc()、var()など)は任意値構文
[value]を生成する可能性があります - キーフレームアニメーション(@keyframes)はTailwindテーマで手動設定が必要です
- ブラウザ固有のプレフィックス(-webkit-、-moz-)は追加のプラグインが必要な場合があります
これらの場合は、手動調整と組み合わせてください。
クラス名の冗長性
変換により複数のクラス名の組み合わせが生成される場合があります。実際の使用では、@applyディレクティブまたはコンポーネントとして抽出して、過度に長いHTMLを避けることを検討してください。
セマンティックの喪失
CSSクラス名は通常セマンティックを持っています(.button-primaryなど)。Tailwindへの変換後はスタイルクラスのみが残ります。意味のあるコンポーネントクラス名をコンテナとして保持することをお勧めします。
本番最適化
変換結果は開発段階での活用に適しています。本番環境では未使用クラスを除去する設定を行い、バンドルサイズを最小化してください。
