CSS to Tailwind コンバータは、従来の CSS プロパティを Tailwind CSS ユーティリティクラスにリアルタイムでマッピングします。左側に CSS を貼り付けると右側に変換されたクラス文字列が表示されます。ネスト構文・メディアクエリ・疑似クラス・疑似要素・@supports クエリに対応しており、プロジェクト移行・Tailwind クラス名の学習・デザインエクスポートの変換に役立ちます。

変換例

hover 状態とレスポンシブブレークポイントを含む入力：

.button {
  padding: 0.875rem 1rem;
  margin-left: 16px;
  font-size: 12px;
  color: #3b82f6;

  &:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }

  @media (min-width: 768px) {
    width: 750px;
  }
}

出力：

<div class="py-3.5 px-4 ml-4 text-xs text-blue-500 hover:text-blue-700 hover:underline md:w-[750px]">

padding: 0.875rem は py-3.5 に、font-size: 12px は text-xs に、ネストされた &:hover は hover: バリアントに、min-width: 768px は md: プレフィックスになります。

カスタム Tailwind 設定の使い方

右下の設定パネルは標準 Tailwind JSON を受け付けます。設定がない場合はデフォルトの Tailwind テーマが使用され、対応するクラスのない値は任意値構文（w-[750px]）にフォールバックします。プロジェクトの設定を追加すると次の 3 つが変わります。

カスタムカラー: colors["brand-blue"]["600"]: "#1e40af" を設定すると、その hex 値が text-[#1e40af] ではなく text-brand-blue-600 に変換される
カスタムブレークポイント: screens["tablet"]: { min: "640px", max: "1023px" } で対応するメディアクエリが tablet: プレフィックスに変換される
@supports: supports["grid"]: "display: grid" で @supports (display: grid) が supports-grid: に変換される

きれいに変換されないケース

calc() 式（例：width: calc(100% - 2rem)）
var() CSS 変数参照
非標準値（例：padding: 7px — Tailwind に対応ステップなし）
複雑な filter 関数チェーン

@keyframes アニメーション定義
ブラウザプレフィックス（-webkit-・-moz-）
CSS Grid 名前付きエリア（grid-template-areas）
カスタムプロパティ宣言（:root { --var: value }）

rem の基準値に注意

ツールは 1rem = 16px を固定基準として rem を px に換算します。プロジェクトで html { font-size: 62.5% } のようにルートフォントサイズを変更している場合（1rem = 10px になる）、変換後のクラス名がずれます。設定パネルの remInPx フィールドをプロジェクトの実際のルートフォントサイズに合わせて変更してください。

CSS to Tailwind

変換例

カスタム Tailwind 設定の使い方

きれいに変換されないケース

任意値構文が生成されるケース

手動対応が必要なケース

rem の基準値に注意