Tailwind CSS Converter
Convert raw CSS to Tailwind CSS utility classes and vice versa. Supports margin, padding, display, flex, grid, colors, typography, borders, and more.
CSS Input
Tailwind Output
Paste CSS on the left to generate Tailwind classes
Tailwind CSS Converter
Convert raw CSS to Tailwind CSS utility classes and vice versa. Supports margin, padding, display, flex, grid, colors, typography, borders, and more.
Features
- Convert CSS properties to Tailwind CSS utility classes instantly
- Reverse mode: convert Tailwind classes back to raw CSS
- Supports 50+ CSS properties including flex, grid, spacing, colors, and typography
- Handles arbitrary values with Tailwind bracket notation
- Recognizes Tailwind default spacing scale, color palette, and breakpoints
- Highlights unmapped properties so you know what needs manual conversion
How to use
- Paste your CSS code in the left panel or click Sample for example CSS.
- View the generated Tailwind classes instantly on the right panel.
- Click Swap to switch to reverse mode and convert Tailwind classes back to CSS.
Tips & Best Practices
- All processing happens in your browser — no data is sent to any server.
- Use the copy button to quickly transfer results to your clipboard.
- The tool works offline once loaded — no internet connection required for processing.
- Check the FAQ section below for answers to common questions.
- Share this tool with colleagues using the social sharing buttons.
FAQ
What CSS properties are supported?
The converter supports over 50 common CSS properties including display, position, flex/grid layout, margin, padding, width, height, font-size, font-weight, colors, border, border-radius, opacity, box-shadow, z-index, overflow, cursor, and many more. Unsupported properties are listed as unmapped comments.
Can I convert Tailwind classes back to CSS?
Yes. Click the Swap button to switch to reverse mode. Enter space-separated Tailwind utility classes, and the tool will generate the equivalent CSS declarations wrapped in a .element selector.
How are colors mapped?
The converter recognizes Tailwind's default color palette (slate, gray, red, blue, green, yellow, purple) at various shades (50-900). Hex values like #3b82f6 are mapped to blue-500. Unrecognized colors use Tailwind's arbitrary value syntax, e.g. bg-[#custom].
Does it handle shorthand CSS properties?
Yes. Shorthand properties like margin, padding, and border are parsed and converted to their Tailwind equivalents. For example, margin: 8px 16px becomes my-2 mx-4, and border: 1px solid #ccc becomes border border-solid border-[#ccc].
Is my CSS data sent to a server?
No. All conversion happens entirely in your browser using client-side JavaScript. Your CSS code never leaves your device, making this tool completely private and safe to use with proprietary code.
What happens with unsupported properties?
Properties that cannot be mapped to a standard Tailwind class are listed as comments in the output. This lets you see exactly which properties need manual handling or custom Tailwind configuration.
Does it support Tailwind arbitrary values?
Yes. When a CSS value does not match Tailwind's default scale, the converter uses arbitrary value syntax like p-[13px] or text-[22px]. In reverse mode, arbitrary values like w-[200px] are correctly parsed back to width: 200px.