CSS to TailwindCSSコンバータ

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