本文へスキップ
変換ツール

CSS → Tailwind 変換｜CSS を Tailwind のクラスに変換

CSS 宣言を Tailwind CSS 3.x のユーティリティを使う形へ変換します。既存スタイルを移行する際に、対応するクラスを調べる補助として使えます。

既存の CSS を移行するときに、対応する Tailwind のユーティリティを調べる。

CSS

TailwindCSS 3.x

こんなときに使えます

  • 既存の CSS を移行するときに、対応する Tailwind のユーティリティを調べる。
  • 書き慣れた CSS を変換して、Tailwind のクラス名を覚える。

使い方

  1. CSS を入力します。
  2. 必要に応じて rem の基準値や Tailwind 設定を調整します。
  3. 生成された @apply などの出力を確認し、対象の Tailwind プロジェクトで検証します。

入力例

.card { display: flex; padding: 1rem; }

出力例

.card {
  @apply flex p-4;
}

仕様と注意点

このツールの対象は Tailwind CSS 3.x です。Tailwind CSS 4 の設定や構文との互換性を保証するものではありません。

独自の値、複雑なセレクタ、擬似要素は変換できないことがあります。見た目の完全一致を保証するものではないため実画面でも確認してください。

カスタム設定欄は JavaScript としてブラウザで評価されます。信頼できない設定を貼り付けないでください。例は既定のスケールでの宣言部分です。

入力内容は同じタブ内に一時保存され、再読み込みや同じ入力形式のツールで再表示される場合があります。共用端末では、使い終わったら入力欄をクリアしてください。

よくある質問

Tailwind CSS v4 に対応していますか？

Tailwind CSS v3 のクラス名とスケールで変換します。flex・p-4・text-sm など多くのユーティリティは v4 でも同じ名前ですが、v4 では設定を CSS 側に移し、一部のユーティリティ名を変更しているため、v4 のプロジェクトで確認してください。

@apply ではなくクラス名で使うには？

@apply の後ろのクラスを、要素の class 属性にそのまま書きます（例：class="flex p-4"）。@apply の形式は元のセレクタごとにクラスをまとめて表示しています。

Bootstrap のクラスを Tailwind に変換できますか？

できません。変換するのは CSS の宣言で、他のフレームワークのクラス名ではありません。Bootstrap のコンポーネントを構成する CSS ルールを貼り付けると、対応するユーティリティを確認できます。

一部の宣言が変換されないのはなぜですか？

Tailwind のスケールにない値、複雑なセレクタ、擬似要素には対応するユーティリティがない場合があります。それらは CSS のまま残すか、Tailwind の設定に追加してください。