Tailwind <-> CSS Converter
Translate Tailwind CSS utility classes to vanilla CSS, or CSS back to Tailwind. Instant and bidirectional.
w-[100px] are also supported.
About the Tailwind <-> CSS Converter
The Tailwind to CSS Converter by Grab-Kit is a free online tool designed for frontend developers. Tailwind CSS has revolutionized styling with its utility-first approach, but sometimes you need to translate those classes back to vanilla CSS—whether to remove the framework dependency, integrate with a legacy codebase, or understand what a specific combination of classes actually does under the hood. Our tool bridges this gap instantly.
Using the tool is incredibly straightforward. Toggle between the two modes using the tabs above. In "Tailwind to CSS" mode, paste your HTML class attributes (e.g., flex p-4 bg-red-500), and the tool will generate the equivalent CSS block (e.g., .class { display: flex; padding: 1rem; background-color: #ef4444; }). In "CSS to Tailwind" mode, paste standard CSS properties, and the tool will attempt to find the matching Tailwind utility classes. It handles common spacing scales (p-1 to p-16), colors, flexbox properties, and typography, making it a perfect daily utility.
Why use Grab-Kit?
All our tools run entirely in your browser. This means your code is processed instantly without any server-side delays, ensuring 100% privacy. It is completely free, requires no signup, and works flawlessly on both desktop and mobile devices, making it the perfect companion for your frontend development workflow.