CSS to Tailwind Converter
Supports: display, flex, grid, margin, padding, width, height, font-size, font-weight, border-radius, opacity, z-index, gap, color, shadows, position, cursor, overflow, transitions, and more. Custom colors and complex properties may appear in the unmatched section.
Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.
Paste a CSS rule block and get the equivalent Tailwind CSS class string. Supports: display, flex-direction, flex-wrap, justify-content, align-items, align-self, flex/grow/shrink/basis, grid layout, margin/padding (shorthand and directional), width/height/max-min variants, font-size, font-weight, border-radius, border-width, opacity, z-index, gap, position, cursor, overflow, white-space, line-height, letter-spacing, transitions, box-shadows, visibility, pointer-events, user-select, inset properties (top/right/bottom/left), and background/text color (white/black/transparent). Unmatched properties appear in an amber panel - keep them as inline styles or extend your Tailwind config.
How to Use
- 1Paste your CSS rule block into the left panel (include the .selector { } wrapper)
- 2Click Convert to Tailwind
- 3Review matched Tailwind classes in the right panel - use className="..." in your JSX
- 4Check the amber Unmatched panel for properties that need custom values or inline styles
- 5Repeat for each CSS block you want to convert
Features
- Converts 40+ CSS properties to Tailwind utility classes
- Full margin/padding shorthand and directional support (mt-, px-, etc.)
- Width/height with percentage, viewport, auto, fit/min/max-content
- Flex (direction, wrap, justify, align, grow, shrink, basis, gap)
- Font size (xs–9xl), font weight (thin–black)
- Border radius (none–3xl, full)
- Position, cursor, overflow, white-space, z-index, opacity
- Box-shadow, transitions, visibility, pointer-events, user-select
- Inset properties (top/right/bottom/left)
- Amber unmatched panel for non-convertible properties
- className output string ready to paste into JSX
Frequently Asked Questions
Community Feedback
Like
Total Rating
No ratings yetReviews
No reviews yet. Be the first!
Rate & Review
Was this tool helpful?
Rate this tool:
Write a Review