CSS → Tailwind 変換器

TailwindCSSについて

Tailwind CSSはユーティリティファーストのCSSフレームワークで、あらかじめ定義されたクラスをHTMLに直接適用してスタイリングします。既存のCSSをTailwindプロジェクトに移行する際や、Tailwindクラスを素早く調べたい場合にこのツールが役立ちます。

例：ホバー状態とメディアクエリを持つボタン

.btn {
  margin: 0 auto;
  padding: 16px 24px;
  color: #3b82f6;
  background-color: #ffffff;
  width: 50%;
  max-width: 64rem;
  line-height: 1.5;
  border: 1px solid #e5e7eb;
  margin-top: 13px;
  transition: all 0.2s;
}
.btn:hover { background-color: #2563eb; }
@media (min-width: 768px) { .btn { padding: 2rem; } }

の変換結果：

/* .btn */
my-0 mx-auto py-4 px-6 text-blue-500 bg-white w-1/2 leading-normal border border-solid border-gray-200 transition-all duration-200
/* keep: max-width: 64rem */
/* keep: margin-top: 13px */

/* .btn:hover */
bg-blue-600

/* .btn (md) */
md:p-8

何が起きたか、クラスをどう仕上げるか（Tailwind ドキュメント）：

• 16px 24px は py-4 px-6 になりました。ピクセル値を 16 で割って rem にし、スペーシングの1段階は 0.25rem です。
• #3b82f6・#ffffff・#2563eb はデフォルトパレットの色（blue-500・white・blue-600）に一致しました。
• border: 1px solid #e5e7eb は border border-solid border-gray-200 になりました。ショートハンドの各部分（幅、スタイル、色）がすべて対応表にあるときだけ変換し、1 つでもなければ宣言全体をコメントとして残すので、一部が消えることはありません。
• transition: all 0.2s は transition-all duration-200 になりました。Tailwind の transition-* クラスだけだと 150 ms になるため、時間は必ず書き出します。これらのクラスはタイミング曲線も cubic-bezier(0.4, 0, 0.2, 1) にしますが、CSS の既定値は ease です。曲線まで合わせるなら ease-[ease] を加えてください。
• max-width: 64rem は max-w-5xl が 64rem であるにもかかわらず残されました。ツールの対応表にない値は、対応するクラスがあってもコメントとして残ります。
• .btn:hover は別グループになりました。hover: を付けて hover:bg-blue-600 にします。
• @media (min-width: 768px) 内のルールは md:p-8 になりました。768px はデフォルトの md ブレークポイントです。他のメディアクエリはグループのコメントに書くだけで、接頭辞は付けません。

仕上げたクラス：

<button class="mx-auto mt-[13px] mb-0 py-4 px-6 md:p-8 text-blue-500 bg-white hover:bg-blue-600
               w-1/2 max-w-5xl leading-normal border border-solid border-gray-200
               transition-all duration-200">

例：セレクターなしのよく使う宣言

padding: 0.5rem 1rem;
margin: 0;
top: 0;
z-index: 10;
overflow: hidden;
position: sticky;
opacity: 0.5;
cursor: pointer;
grid-template-columns: repeat(3, 1fr);
flex: 1;
height: 100vh;
font-size: 14px;

の変換結果：

py-2 px-4 m-0 top-0 z-10 overflow-hidden sticky opacity-50 cursor-pointer grid-cols-3 flex-1 h-screen text-sm

任意の値

デフォルトのスケールにない値は角かっこで指定できます：mt-[13px]、max-w-[60rem]、text-[#ff6600]、grid-cols-[200px_1fr]（アンダースコアは空白の代わり）。コンバーターはこの形を出力せず keep コメントを残すので、任意の値にするか最も近いスケールにするかを判断してください。

制限

• 値は対応表で引くだけで計算はしません。表にない値は、対応するクラスがあってもコメントとして残ります（上の max-width）。
• 疑似クラス付きのセレクターは別グループになり、hover:・focus: の接頭辞は出力されません。
• 接頭辞になるのは、幅がデフォルトのブレークポイント（640px、768px、1024px、1280px、1536px または同じ値の rem）の @media (min-width: …) だけです。他のメディアクエリ、@supports、コンテナクエリはグループのコメントに書くだけです。
• カンマで区切った複数の transition、cubic-bezier()、スケール外の時間（0、75、100、150、200、300、500、700、1000 ms 以外）はコメントとして残ります。
• CSS 変数、calc()、デフォルトパレット外の色はコメントとして残ります。
• Tailwind v4 では一部のユーティリティ名が変わりました（シャドウや角丸のスケールなど）。v4 を使う場合はアップグレードガイドを確認してください。