Paste HTML with Tailwind classes or a list of class names and get equivalent vanilla CSS declarations instantly. All conversions run in your browser — your code never leaves your machine.
Tailwind CSS is a utility-first framework where styling is done by composing small, single-purpose classes directly in HTML. This tool reverses that process: it reads Tailwind class names and outputs the equivalent CSS property declarations, making it easy to understand what a Tailwind class does or to migrate away from Tailwind entirely.
Paste full HTML and the converter extracts classes from every element, grouping output by selector.
Covers layout, spacing, typography, colors, borders, effects, transitions, and responsive variants.
Each output block is annotated with the source class name for easy cross-referencing.
Classes that can't be translated are listed separately — custom utilities or misspellings are clearly flagged.
The converter handles the full Tailwind v3 default scale including: spacing (p-4, m-auto, gap-6), sizing (w-full, h-screen, max-w-lg), flexbox & grid (flex, grid, items-center, justify-between), typography (text-xl, font-bold, leading-relaxed), colors (bg-blue-500, text-gray-900), borders (rounded-lg, border, border-red-400), and effects (shadow-md, opacity-50, transition).
Tailwind's responsive prefixes (sm:, md:, lg:, xl:, 2xl:) and state variants (hover:, focus:, active:, disabled:) are converted to the appropriate CSS media queries and pseudo-class selectors respectively.
Tailwind is excellent for rapid prototyping and design systems. However, some teams prefer vanilla CSS for: reduced HTML verbosity, easier CSS-in-JS integration, stricter separation of concerns, or removing the Tailwind build step from smaller projects. This tool is also useful for learning — seeing the CSS behind a class like shadow-xl is immediately educational.
The converter is based on the Tailwind v3 default scale and utility mappings. Tailwind v4 changed the configuration model significantly — many classes are the same but the CSS variables underlying colors changed. Most v3 utility classes convert correctly; custom theme values from v4 configurations won't be recognised.
Arbitrary values using Tailwind's square bracket syntax (w-[340px], text-[#ff6fb0]) are parsed and converted to the corresponding CSS property with the literal value: width: 340px and color: #ff6fb0. This covers the most common use cases.
Yes — paste your component HTML, copy the generated CSS into a stylesheet, and replace the class attributes with a semantic class name. This tool handles the mechanical translation; you'll still need to consolidate repeated declarations and organise your CSS architecture. For large projects, consider doing it component by component.
The tool covers Tailwind's built-in utilities. Custom utilities added via @layer utilities, third-party plugins (e.g. @tailwindcss/typography), or project-specific classes defined in tailwind.config.js are not in the mapping and will appear as unrecognised. The actual CSS for these comes from your Tailwind config and can't be inferred without it.
The dark: variant is recognised and converted to a @media (prefers-color-scheme: dark) block wrapping the appropriate CSS declaration. Class-based dark mode (.dark .element) would require knowing your project's dark mode strategy, so media query is used as the universal default.