CSS を近似する Tailwind クラスに変換します。色・スペーシング・フォントに対応。マッチごとの信頼度レベル付き。
Approximate conversion. Review output for complex properties like shadows and transforms.
The IT Hustle の無料CSS→Tailwindコンバーターで、確信度評価付きでプレーンなCSSをTailwindユーティリティクラスに変換しましょう。
「高」は標準的なTailwindユーティリティへの正確な一致(padding: 16px → p-4)を意味します。「中」は最も近いスケール値が選ばれたことを意味し、元の値とわずかに異なる場合があります。「低」はきれいな対応がなかったため、p-[42px]のような任意の値が生成されたことを意味します。
Tailwindの任意値構文で、デザインスケール外の値に対して一回限りのユーティリティを生成します。問題なく動作しますが、コードベースの他の部分との一貫性のために、値をスケールのステップに近づける(p-[42px]の代わりにp-10にするなど)ことも検討してください。
Tailwindのパレットに正確に一致する色は直接マッピングされます(例:#ef4444 → red-500)。それ以外の色はRGBの距離を比較して最も近いパレットの色にマッピングされ、確信度が低いとフラグが付くため、その近似が許容できるかどうかを判断できます。
一般的なレイアウトとスタイリングのセットです:マージン、パディング、サイズ、display、position、flexboxの配置、フォントサイズと太さ、色、テキスト配置、border-radius、overflow、opacity、cursorです。複雑なセレクター、メディアクエリ、アニメーションは対象外なので、それらは手動で変換してください。