Tailwind Class to CSS Converter
This tool converts Tailwind CSS utility classes into standard CSS property-value pairs. Paste a list of Tailwind classes, and the tool returns the equivalent CSS you can use in any project, whether or not it uses Tailwind. Everything runs in your browser. No data is sent to any server.
Tailwind classes
Static class map version: 2026-05-28
Generated CSS
/* Tailwind class map 2026-05-28 (v4) */
.element {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background-color: #3b82f6;
color: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}Class by class mapping
| Class | Scope | Property | Value |
|---|---|---|---|
| flex | base | display | flex |
| items-center | base | align-items | center |
| justify-between | base | justify-content | space-between |
| p-4 | base | padding | 1rem |
| bg-blue-500 | base | background-color | #3b82f6 |
| text-white | base | color | #ffffff |
| rounded-lg | base | border-radius | 0.5rem |
| shadow-md | base | box-shadow | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
This converter uses a static class map. Always check the output against your Tailwind config and custom theme.
How does the Tailwind Class to CSS Converter work step by step?
Tailwind utilities map one-to-one to CSS properties. The class text-center becomes text-align: center. The class bg-blue-500 becomes background-color: #3b82f6. The converter maintains an internal lookup table of every default Tailwind utility and its CSS equivalent based on the official Tailwind v3.4+ specification.
What does a typical Tailwind Class to CSS Converter result look like?
A card class list of flex items-center p-4 rounded-lg bg-blue-500 text-white becomes one base CSS block with display, alignment, padding, border radius, and colors ready to paste into any stylesheet.
Frequently asked questions
Does the converter support Tailwind v4 or only v3?
The tool supports Tailwind v3.4 syntax and defaults as of 2026. Tailwind v4 (still in beta) introduces CSS-first configuration, which changes how utilities resolve. Once v4 is stable, the converter will add v4 mode. For now, it assumes v3.
Can I convert Tailwind classes that use custom colors from my config?
Yes, if you provide your tailwind.config.js file. The tool parses the extend.colors section and resolves classes like bg-brand-primary to your custom HEX value. Without a config, it falls back to default Tailwind colors.
How do I convert dark mode utilities like dark:bg-gray-800?
The tool outputs a media query or class-based selector depending on your Tailwind config. If darkMode: 'media', it wraps the CSS in @media (prefers-color-scheme: dark). If darkMode: 'class', it nests the CSS under .dark .your-class.
Does the converter handle Tailwind plugins like forms or typography?
No. Tailwind plugins add custom utilities (prose, form-input) that are not part of core Tailwind. The converter only supports default utilities and user-provided config extensions. Plugin utilities require manual translation.
Can I convert a full HTML file with Tailwind classes?
The tool accepts a class string, not HTML. To convert an entire file, extract the class attributes manually or use a batch mode (if available). Paste one class string at a time, or concatenate them with spaces.
What happens if I input a class that does not exist in Tailwind?
The converter skips unknown classes and outputs a warning. If you paste "nonexistent-class text-center", you get text-align: center and a note that "nonexistent-class" was not recognized. This catches typos and invalid utilities.