What the Tailwind Class Converter does
This Tailwind converter turns Tailwind CSS utility classes into the plain CSS they generate, including responsive prefixes such as md:, state variants such as hover: and disabled:, and dark:. It also works in reverse: paste plain CSS and it suggests the matching default Tailwind utilities, falls back to arbitrary values such as max-w-[37rem] where the theme has no exact match, and lists what has no equivalent.
Values come from Tailwind CSS 3.4.17's default theme, stored with this page and dated, so a customised tailwind.config.js or Tailwind v4 can give different results. Nothing you paste leaves your browser.
How to use it
- Choose the direction: Tailwind classes to CSS, or CSS to Tailwind classes.
- For classes, paste a class list or a whole HTML snippet; every
class="..."attribute is read. Set the selector the CSS rule should use. - For CSS, paste declarations or whole rules. Selectors are dropped, and a
@media (min-width: 768px)block becomes themd:prefix. - Read the notes: classes that could not be converted are listed with the reason, and arbitrary values show the nearest theme value.
- Copy or download the result.
Reading the results
Classes with the same variants are merged into one rule, and responsive rules are ordered mobile-first (base, then sm, md, lg, xl, 2xl) as Tailwind orders them.
In the CSS to classes direction, 'exact' means a default utility produces exactly that declaration. 'Arbitrary' means the value is written in square brackets because the default theme has no such step; the note tells you when a theme step would give the same size at the default 16px root font size.
Utilities that depend on Tailwind's internal custom properties across several classes, such as gradient stops (from-, via-, to-), ring, divide and animations, are reported rather than approximated.
Worked example: A button in both directions
px-4 py-2 text-sm font-semibold bg-blue-600 hover:bg-blue-700 rounded-lg converts to padding-left and padding-right: 1rem (spacing step 4 = 4 x 0.25rem), padding-top and padding-bottom: 0.5rem, font-size: 0.875rem with line-height: 1.25rem (text-sm sets both), font-weight: 600, background-color: #2563eb and border-radius: 0.5rem, plus a separate .btn:hover { background-color: #1d4ed8; } rule.
In reverse, padding: 24px 16px is split into block and inline padding. 24px is not written in rem, so it becomes py-[24px] with the note that py-6 (1.5rem x 16px = 24px) gives the same size at the default root font size; 16px becomes px-[16px] with px-4 suggested. color: #1e293b is an exact palette match: text-slate-800.
Limitations: what the result does not prove
- Only the default Tailwind v3.4.17 theme is known. Custom colours, spacing or plugins from your own config are not read, and Tailwind v4 (CSS-first config, oklch colours) generates different values.
- Preflight, Tailwind's base reset, is not included. For example,
bordersets onlyborder-width: 1px; without preflight you also needborder-style: solid, and the page says so when it applies. - The CSS to classes direction maps declarations one by one. It does not recognise shorthand combinations that Tailwind splits differently, and it ignores selectors, so descendant and sibling rules need rewriting by hand.
- The
dark:variant is written asprefers-color-scheme: dark, which is Tailwind's defaultmediastrategy; projects using theclassstrategy need.darkancestor selectors instead.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- Tailwind CSS v3 - Theme configuration
- Tailwind CSS v3 - Responsive design
- Tailwind CSS v3 - Hover, focus and other states
- Tailwind CSS v3.4.17 source - default theme (config.full.js)
Frequently asked questions
What CSS does a Tailwind class like p-4 produce?
In the default theme each spacing step is 0.25rem, so p-4 is padding: 1rem, which is 16px at the browser's default font size. px-4 sets only the left and right padding, and pt-4 only the top. The converter shows the exact declarations for any list of classes.
How are responsive prefixes like md: converted?
Each breakpoint prefix becomes a min-width media query from the default screens: sm 640px, md 768px, lg 1024px, xl 1280px and 2xl 1536px. Tailwind is mobile-first, so an unprefixed class applies at every width and md: overrides it from 768px up.
Why does the CSS to Tailwind direction give 24px as py-[24px] instead of py-6?
Tailwind's spacing scale is in rem, so py-6 is 1.5rem. That equals 24px only while the root font size is 16px; if a visitor raises their browser font size, rem values grow and px values do not. The tool keeps your exact value and names the equivalent step so you can choose.
Can I convert a whole HTML template's classes at once?
Yes. Paste the HTML and every class attribute is read, with duplicates removed. All classes are applied to the one selector you choose, so for a template with many elements it is clearer to convert one element's classes at a time.
Why are some classes listed as not converted?
Either they are not part of default Tailwind v3 (a custom component class such as tooltip-arrow, or a plugin class), or they only work together through Tailwind's internal variables, like gradient stops and rings. Converting those piece by piece would give CSS that looks right but behaves differently.
Which Tailwind version do the values come from?
Tailwind CSS 3.4.17's default theme and colour palette, taken from its published source and checked on the date shown under the input. Tailwind v4 changed the default colours to oklch and moved configuration into CSS, so v4 output differs.
Last reviewed by the A2Z.Tools team against the sources listed above.
