CSS to Tailwind Converter

CSSプロパティを貼り付けると、同等のTailwind CSSユーティリティクラスを即座に取得できます。

CSS 入力
Tailwind クラス16クラス生成

flex flex-col items-center justify-between gap-4 p-6 m-2 w-full rounded-lg bg-[#1a1a2e] text-[#ffffff] text-base font-semibold cursor-pointer overflow-hidden relative

Tailwind CSSとは？

Tailwind CSSはutility-firstのCSSフレームワークで、カスタムスタイルシートを書く代わりにHTMLに直接コンポーズする低レベルなCSSクラスを提供します。display: flex; flex-direction: column; gap: 16pxと書く代わりにflex flex-col gap-4と書けます。TailwindのアプローチはCSSの詳細度の問題を解消し、高速プロトタイピングを可能にし、スタイルをmarkupと同じ場所に置けます。

変換ツールの使い方

入力ボックスにCSSプロパティの宣言を1つ以上貼り付けます（例：padding: 16px、display: flex）。コンバーターは各宣言を解析し、最も一致するTailwindユーティリティクラスを検索します。スペーシング値はTailwindの4pxスケールにマッピングされます（例：16px → p-4）。カラーはbg-[#FF5733]のような任意値クラスで出力されます。Tailwindに直接対応するものがないプロパティはコメントとして保持されます。

このコンバーターがサポートするもの

最も一般的なCSSプロパティを処理します：display・flexbox（flex-direction・justify-content・align-items・gap）・grid・padding・margin・width・height・font-size・font-weight・text-align・border-radius・background-color・color・cursor・overflow・position・z-index。数値はTailwindのスケールの最も近い値に自動マッピングされます。

CSS to Tailwind 変換例

  • display: flex → flex
  • padding: 16px → p-4
  • border-radius: 9999px → rounded-full
  • font-weight: bold → font-bold
  • background-color: #1a1a1a → bg-[#1a1a1a]