CSS → Tailwind変換ツール

使い方

通常のCSSプロパティをTailwind CSSユーティリティクラスに変換。レイアウト、スペーシング、タイポグラフィなどに対応。

1. 1Paste your CSS properties into the input area (e.g., `margin: 16px; color: red;`).
2. 2The tool maps each CSS property to the closest Tailwind CSS utility class.
3. 3Review the generated Tailwind classes in the output panel.
4. 4Copy the classes and apply them to your HTML elements directly.

主な機能

• Converts common CSS properties to equivalent Tailwind utility classes
• Handles spacing, colors, typography, flexbox, and border properties
• Highlights properties with no direct Tailwind equivalent
• Output is formatted as a class string ready to drop into JSX or HTML

よくある質問

詳しく読む

• Tailwind CSS v4 Complete Guide