Which version of Tailwind does this tool use as the reference?

Tailwind CSS v3.x with the default configuration. Custom colors, spacing scales, or extended utilities defined in a project's tailwind.config.js are not reflected unless they override a default value that the tool already maps.

Does it handle the `dark:` variant?

Yes. dark:bg-gray-800 outputs @media (prefers-color-scheme: dark) { background-color: rgb(31, 41, 55); }. If your project uses the class strategy for dark mode (toggling a dark class on the html element), the tool can also output .dark .element { ... } - switch between the two in the settings.

Can I convert the output back to Tailwind?

The reverse direction (CSS to Tailwind) is a different problem and not supported in the current version. The CSS-to-Tailwind direction requires matching arbitrary CSS values to Tailwind's scale, which has many ambiguous cases.

Does it handle Tailwind plugins?

No. Plugins like @tailwindcss/forms, @tailwindcss/typography, or third-party plugins add classes that are not in the default utility table. The tool will report unrecognized classes rather than guessing their output. If you need to convert plugin-generated classes, copy the final CSS from your project's compiled stylesheet (found in your dist or .next/static folder) and extract the rules manually.

What is the difference between Tailwind's `px-4` and `padding-x: 1rem` in CSS?

There is no padding-x property in CSS. Tailwind's px-4 expands to two separate properties: padding-left: 1rem and padding-right: 1rem. The logical CSS equivalent uses padding-inline: 1rem (supported in modern browsers). The tool outputs the two-property version for maximum compatibility.

Is the generated CSS production-ready?

Yes for the CSS properties themselves. However, Tailwind's build process also performs PurgeCSS to remove unused utilities. The plain CSS you generate here contains only the rules for the classes you explicitly converted, so there are no unused styles to worry about.

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

Class list

SelectorTailwind version

Include responsive classesInclude dark mode classes

Country

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 this tool works

Tailwind CSS is a utility-first framework where each class maps to one or a small number of CSS property-value pairs. For example, text-lg maps to font-size: 1.125rem; line-height: 1.75rem. The tool maintains a lookup table of the full Tailwind v3 utility class set and resolves each class to its CSS output using Tailwind's default configuration. 1. Parse the class list: The tool splits the input on whitespace and identifies each class token. 2. Resolve each class: Each token is looked up in the

Worked example

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

Which version of Tailwind does this tool use as the reference?
Tailwind CSS v3.x with the default configuration. Custom colors, spacing scales, or extended utilities defined in a project's tailwind.config.js are not reflected unless they override a default value that the tool already maps.
Does it handle the `dark:` variant?
Yes. dark:bg-gray-800 outputs @media (prefers-color-scheme: dark) { background-color: rgb(31, 41, 55); }. If your project uses the class strategy for dark mode (toggling a dark class on the html element), the tool can also output .dark .element { ... } - switch between the two in the settings.
Can I convert the output back to Tailwind?
The reverse direction (CSS to Tailwind) is a different problem and not supported in the current version. The CSS-to-Tailwind direction requires matching arbitrary CSS values to Tailwind's scale, which has many ambiguous cases.
Does it handle Tailwind plugins?
No. Plugins like @tailwindcss/forms, @tailwindcss/typography, or third-party plugins add classes that are not in the default utility table. The tool will report unrecognized classes rather than guessing their output. If you need to convert plugin-generated classes, copy the final CSS from your project's compiled stylesheet (found in your dist or .next/static folder) and extract the rules manually.
What is the difference between Tailwind's `px-4` and `padding-x: 1rem` in CSS?
There is no padding-x property in CSS. Tailwind's px-4 expands to two separate properties: padding-left: 1rem and padding-right: 1rem. The logical CSS equivalent uses padding-inline: 1rem (supported in modern browsers). The tool outputs the two-property version for maximum compatibility.
Is the generated CSS production-ready?
Yes for the CSS properties themselves. However, Tailwind's build process also performs PurgeCSS to remove unused utilities. The plain CSS you generate here contains only the rules for the classes you explicitly converted, so there are no unused styles to worry about.