CSS → Tailwind Converter

Paste CSS declarations and get the equivalent Tailwind CSS utility classes instantly. Supports spacing, typography, flexbox, grid, colors, borders, shadows, and more. 100% client-side — your CSS never leaves the browser.

TAILWIND VERSION

Show unmapped properties

001

CSS INPUT

435 chars

display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
margin: 0 auto;
max-width: 768px;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
font-size: 1rem;
font-weight: 500;
color: #111827;
cursor: pointer;
opacity: 0.8;
overflow: hidden;
position: relative;
z-index: 10;
transition: all 0.3s ease;

002

TAILWIND CLASSES

⟶ Tailwind classes will appear here

ABOUT CSS → TAILWIND CONVERTER

This tool converts CSS property/value declarations into equivalent Tailwind CSS utility classes. It covers the most common CSS properties: Flexbox, Grid, spacing (padding/margin), sizing, typography, borders, shadows, colors, positioning, and more.

How it works: Each CSS declaration is matched against a comprehensive mapping table. Properties with exact Tailwind equivalents produce utility classes (e.g., display: flex → flex). Properties without a direct equivalent are listed in the "Unmapped" section — use Tailwind's arbitrary value syntax for those: className="[property:value]".

Supported properties: display, flexbox (direction, wrap, align, justify), grid (cols, rows, span), padding, margin, width, height, position, overflow, z-index, typography (size, weight, align, transform, decoration), borders, border-radius, box-shadow, opacity, transition, cursor, and more.

Limitations: Complex values (gradients, custom colors, calc(), media queries, pseudo-selectors) cannot be automatically converted. Tailwind's arbitrary value syntax [value] handles these cases. Processing is entirely in-browser — no data is sent to any server.