OnSumoTools

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

ClassScopePropertyValue
flexbasedisplayflex
items-centerbasealign-itemscenter
justify-betweenbasejustify-contentspace-between
p-4basepadding1rem
bg-blue-500basebackground-color#3b82f6
text-whitebasecolor#ffffff
rounded-lgbaseborder-radius0.5rem
shadow-mdbasebox-shadow0 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.

Related tools

What a utility class really does

Tailwind hides plain CSS behind short names. p-4 is padding of 1rem. flex-col is flex-direction: column. That's handy while you build, and a puzzle when you need the raw CSS. Paste a string of classes here and the converter shows the equivalent rules.

It's useful when you're moving a component out of a Tailwind project, handing styles to someone who doesn't use it, or learning what a class does underneath.

Variants and dark mode

Prefixes like md: and lg: turn into media queries. hover: and focus: become pseudo-class selectors. dark:bg-gray-800 turns into a dark selector rule with the matching color. The output groups these so you can read them in order.

If a class can't be resolved, the tool warns you instead of dropping it silently. A typo like bg-gray-8000 would otherwise vanish.

Custom config and plugins

The converter uses Tailwind's default theme. Custom colors or spacing from your config file won't resolve, because the tool can't see your project. Plugins like forms or typography add rules it doesn't include either.

For those, take the output as a base and fill in your own values. Version differences exist too, since Tailwind's newer releases changed some defaults. Check anything important against your build.

Whole files

It works on class strings, not full HTML documents. Copy the class attribute value from each element and convert one element at a time. For bigger jobs, running Tailwind's own build gives exact output.

Good habits

Read the output, then clean it up. Remove rules you don't need and group repeated values into CSS variables. Your classes stay in your browser.

Why convert at all

You might be moving a component into a project without Tailwind, writing an email template or learning what a utility class really does. Seeing the plain CSS removes the mystery. flex items-center gap-4 becomes display flex, align-items center and a gap of 1rem.

Responsive prefixes become media queries and dark: becomes a dark mode selector. Hover and focus states become pseudo-classes.

Limits to know

Custom classes from a config file, plugin utilities and arbitrary values may not resolve. The tool flags what it can't convert so you can fill the gaps by hand. Always review the output before you paste it into production.