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.
Functies
- 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
Hoe te gebruiken
- 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 en best practices
- Alle verwerking vindt plaats in uw browser — geen data wordt naar een server gestuurd.
- Gebruik de kopieerknop om resultaten snel naar uw klembord over te brengen.
- Het gereedschap werkt offline zodra het is geladen — geen internetverbinding vereist voor verwerking.
- Bekijk de FAQ-sectie hieronder voor antwoorden op veelgestelde vragen.
- Deel dit gereedschap met collega's via de sociale deelknoppen.
Veelgestelde vragen
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.