CSS CSS to Tailwind Converter

Home/Tools/CSS to Tailwind Converter

Convert CSS declarations to Tailwind CSS utility classes with 200+ property mappings.

No sign-up neededRuns in your browserProduction-ready CSS

CSS Input

Paste CSS declarations (properties and values, without selectors or braces)

Options

Use arbitrary values for unknown sizesShow unresolved properties

Tailwind Classes

18 converted

flexitems-centerjustify-betweengap-4py-6px-8my-0mx-autobg-whiterounded-xlshadow-[0 4px 6px -1px rgba(0,0,0,0.1)]text-basefont-semiboldtext-neutral-900borderborder-gray-200w-fullmax-w-2xl

Converted Classes

/* Original CSS */
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px 32px;
margin: 0 auto;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
font-size: 16px;
font-weight: 600;
color: #1d1d1f;
border: 1px solid #e5e7eb;
width: 100%;
max-width: 640px;

Related Tools

CSS Variables Generator

Create and organize CSS custom properties for your design system.

Media Query Generator

Generate responsive media queries for all device sizes.

Z-Index Visualizer

Visualize and manage z-index stacking contexts.