Công cụ Developer

Tailwind CSS Converter

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

Được tin dùng bởi hơn 10k developer

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.