Back to Design Tools

CSS to Tailwind Converter

Paste regular CSS and get equivalent Tailwind CSS classes

CSS Input
Tailwind Classes
Tailwind classes will appear here...

CSS to Tailwind CSS Converter

Convert regular CSS properties to their Tailwind CSS utility class equivalents. Paste any CSS — with or without selectors — and get the matching Tailwind classes. Supports 100+ CSS properties including layout, spacing, colors, typography, borders, shadows, transitions, and more.

Supported Properties

📐 Layout

display, position, flex, grid, justify, align, gap, width, height, overflow, z-index

📏 Spacing

padding, margin (all shorthands: p, px, py, pt, m, mx, my, mt, etc.)

🎨 Colors

Full Tailwind color palette mapping for background, text, and border colors

✨ Effects

border-radius, box-shadow, opacity, cursor, transition, visibility