By Team Edtoolkits · Developer
Convert Tailwind classes to plain CSS, or plain CSS to Tailwind classes, for the common utilities, with hover, responsive and dark variants and arbitrary values.
Use the guide alongside the working tool.
Open Tailwind CSS Converter →Get started
Paste Tailwind classes or CSS. The direction is detected, or you can choose it.
Adjust and explore
Pick separate rules or one merged rule, and read the notes for anything that was not on the default scale.
Save and share
Copy the result or download it.
Privacy and limits
Covers the common core of Tailwind's default theme (spacing, sizing, layout, flex, grid, text, borders, radius, shadow, opacity, transitions and the gray, red, blue and green colour scales), not every utility or plugin, and not custom themes. Colours use the classic hex palette; newer Tailwind versions use OKLCH values that look almost the same. CSS that has no matching class becomes an arbitrary value like w-[13px]. Your text stays on your device.
Ready to apply this workflow?
Try Tailwind CSS Converter →Explore a related workflow
- CSS Gradient Generator: A Practical Guide
Design linear, radial and conic gradients with editable stops, then export CSS, PNG or supported SVG.
- CSS Shadow Generator: A Practical Guide
Create layered box or text shadows with live preview, precise controls and ready-to-copy CSS.
- Product Mockup Maker guide
Place artwork in phone, laptop, book, poster, shirt and mug mockups.
- Seamless Pattern Maker: design and export guide
Design seamless repeats with straight, brick, half-drop and mirrored layouts. Export the repeat tile or a finished pattern.
Keep your original files and review the result. Found unclear instructions? Contact Team Edtoolkits.