Softonic

CSS を Tailwind に変換

ステップ 1 / 2
Tailwind に変換

レガシーなスタイルシートを 1 ルールずつ Tailwind へ移行するのは骨の折れる作業です。このコンバーターは、セレクターや波かっこの有無を問わず、素の CSS ブロックを受け取り、各宣言を Tailwind のユーティリティとして書き換えます。認識されたペアは flex、items-center、rounded-lg などの名前付きユーティリティにマッピングされ、それ以外はすべて Tailwind の任意値構文 [property:value] にフォールバックするため、何かが黙って捨てられることはありません。

コンバーターが CSS を処理する仕組み

  1. 1

    CSS を貼り付ける

    `.card { padding: 16px; border-radius: 8px; }` のような完全なルール、または波かっこ内の宣言だけを貼り付けます。

  2. 2

    パーサーがコメントを除去

    宣言がセミコロンで分割される前に、ブロックコメント `/* ... */` が除去されます。

  3. 3

    各宣言がマッピングされる

    一般的なプロパティは実際の Tailwind ユーティリティにマッピングされます（余白、角丸、フォントサイズ、flex、display、text-align）。不明なものは `[prop:value]` にフォールバックします。

  4. 4

    コピーして適用

    クラスの一覧を、対応する HTML 要素の `class` 属性に貼り付けます。

名前付きユーティリティにマッピングされるもの

Tailwind のデフォルトテーマではあらゆる CSS 値をカバーできないため、コンバーターは名前付きユーティリティが存在するものを優先し、それ以外の場所では任意値を使用します。

直接マッピング

CSS 宣言 Tailwind ユーティリティ
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

スケールを考慮したマッピング

padding、margin、width、height、および最小/最大の各寸法は、px 値を 4 で割って Tailwind の余白ステップを生成します。たとえば padding: 16px は p-4 に、width: 32px は w-8 になります。きれいなステップに収まらない値は、対応するユーティリティ上で任意値にフォールバックします。たとえば width: 37px は w-[37px] になります。

border-radius は最も近い名前付きユーティリティ（rounded-sm、rounded-md、rounded-lg、rounded-xl、rounded-2xl）にマッピングされます。16px を超えるサイズは rounded-full になり、ピル型（pill）の要素には便利ですが、異常に大きな角丸には不適切です。リリース前に出力を確認してください。

font-size はピクセルのしきい値に応じて text-xs から text-3xl の範囲に振り分けられます。

注意事項

  • 擬似クラス、メディアクエリ、セレクターは変換されません。変換されるのは波かっこ内の宣言のみです。hover: や md: などのバリアントは、引き続きご自身で追加する必要があります。
  • コンバーターはお使いの Tailwind テーマのパレットを把握していないため、色は text-[#1f2937] のような任意値になります。手動で text-gray-800 やカスタムトークンに置き換えてください。
  • めったに使わない一括指定プロパティ（border、background、transition）はそのまま [property:value] として出力されます。リリース前に確認してください。

よくある質問

出力には、Tailwind v3 と v4 の両方で安定して使えるユーティリティ名が用いられます。角かっこ内の任意値もどちらでも有効です。貼り付け後は、色を v4 の @theme パレットへ再トークン化するとよいでしょう。

コンバーターはお使いの tailwind.config.js のカラースケールを参照できないため、色を対応するユーティリティ上の任意値（text-[#1f2937]）として出力します。手動で最も近いパレットトークン、たとえば text-gray-800 や定義済みのブランドトークンにマッピングしてください。

はい。複数のルールを貼り付けてください。ツールはセレクターごとに 1 つのクラス一覧を出力し、/* selector */ コメントで区切るため、対応する HTML と対応付けられます。

CSS は変換のために当社のサーバーへ送信されます。保存されることはなく、ページのリンクにも含まれません。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

HTML フォーマッター

ブラウザ内で HTML を 2 または 4 スペースで整形します。HTML はアップロードも検証もされません。

変更ログジェネレーター

分類した項目から Keep a Changelog 形式の Markdown セクションを作成します。Added、Changed、Fixed、Removed の各カテゴリに項目を貼り付け、Markdown かプレーンテキストを選んで出力をコピーするだけです。

Markdownチートシート

見出し、リスト、表、コード、リンク、画像、GFM構文を、実際のプレビューとコピーできる例で確認できる実用的なMarkdownリファレンスです。

このツールは他の言語でも利用できます