开发者工具

Tailwind CSS Converter

Convert vanilla CSS to Tailwind utility classes and Tailwind classes back to CSS

深受 1 万+ 开发者信赖

CSS Input

Tailwind Output

flex flex-col justify-center items-center p-6 m-4 bg-white rounded-lg border border-slate-200 shadow-none text-base font-semibold text-slate-800 cursor-pointer transition-all

How it works

• CSS → Tailwind: Paste vanilla CSS and get the equivalent Tailwind utility classes.
• Tailwind → CSS: Paste Tailwind classes and get the equivalent vanilla CSS.
• Supports display, position, flexbox, spacing, colors, typography, borders, shadows, and more.
• Properties without a direct Tailwind match use arbitrary value syntax like w-[300px].
• Everything runs locally in your browser — no data is sent anywhere.