CSS to Tailwind & Tailwind to CSS Converter

What this tool does

This converter works in both directions. Paste CSS declarations and it outputs the matching Tailwind utility classes. Paste Tailwind classes and it outputs plain CSS. Everything runs in your browser as you type, nothing is sent to a server.

Values that land exactly on Tailwind's default scale (spacing, the 242-shade color palette, font sizes, border radius, and so on) convert to named utilities, like p-4 or bg-blue-500. Anything else, a custom brand color, an odd pixel value, a CSS feature Tailwind has no utility for, converts using Tailwind's arbitrary-value syntax, like w-[137px] or [clip-path:circle(50%)], so the output is always visually correct even when it isn't a named class.

How to use it

1. Pick a direction: CSS to Tailwind or Tailwind to CSS, using the tabs above the input box.
2. Pick your Tailwind version, v3 or v4. This mainly affects the shadow, blur, and rounded-corner scales, which Tailwind v4 renamed.
3. Paste your CSS declarations or your Tailwind class list into the box. The result updates automatically as you type.
4. Use Copy classes or Copy CSS to grab the result, or Copy shareable link to send the whole conversion, input included, to someone else.

Supported CSS properties

The converter covers the properties developers reach for most often: layout and display, flexbox and grid (including grid-template-columns: repeat(n, ...)), all four margin/padding directions and gap, width and height (including fractions and the named max-width scale), colors for background/text/border/outline, typography (font size, weight, line height, letter spacing, text decoration and transform), border width/style/color/radius (including the common shorthand, like border: 1px solid #e2e8f0), box-shadow, opacity, z-index, transitions, transform functions (translate, scale, rotate), filter and backdrop-filter functions (blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia), cursor, and line-clamp.

A handful of things are intentionally out of scope for a clean automatic conversion and always fall back to arbitrary-value or arbitrary-property syntax: gradients and other background-image values, CSS animations and @keyframes, clip-path (Tailwind has no built-in utility for it in v3 or v4), CSS anchor positioning, and anything defined on a pseudo-class selector rather than a property, like :nth-child(), since Tailwind handles selectors through variants written in your markup rather than through the class list this tool generates.

Tailwind v3 vs v4 differences this tool accounts for

Most utility names are identical between v3 and v4. The scales that changed are shadow, blur, backdrop-blur, and rounded corners: v4 renamed the old sm rung to xs and promoted the old bare default up to sm. For example, a border-radius that used to convert to rounded in v3 converts to rounded-sm in v4, and what used to be rounded-sm in v3 becomes rounded-xs in v4. The version toggle above the input handles this automatically in both directions. Text shadows are the other version-sensitive case: v3 has no built-in text-shadow utility at all, and while v4.1 added one, this tool deliberately uses the arbitrary-value form for it either way, since that's the option guaranteed to render the exact shadow you specified.

Frequently Asked Questions

How do I convert CSS to Tailwind classes?

Switch to the CSS to Tailwind tab, paste one or more CSS declarations (property: value pairs, with or without the surrounding selector and curly braces), and the tool converts each line as you type. Values that match Tailwind's default spacing, color, font-size, or radius scale become named utility classes, like p-4 or bg-blue-500. Anything outside those scales, such as a custom hex color or an odd pixel value, converts using Tailwind's arbitrary-value syntax instead, like w-[137px], so the output always stays visually accurate.

How do I convert Tailwind classes back to plain CSS?

Switch to the Tailwind to CSS tab and paste a space-separated list of classes, exactly as you'd write them in a class attribute. The tool resolves each utility, including responsive prefixes like md:, pseudo-class variants like hover: and focus:, dark:, and arbitrary-value classes like bg-[#1a2b3c], into a plain CSS rule you can drop into a stylesheet.

Does this converter support Tailwind CSS v3 or v4?

Both. Use the version toggle above the input box. It matters most for the shadow, blur, and rounded-corner scales: Tailwind v4 renamed the old sm rung to xs and shifted the old bare default up to sm, so the same CSS value produces a different class name depending on the version you pick. Everything else, including color and spacing utility names, is identical between the two versions.

How do I use line-clamp in Tailwind?

Paste the standard multi-line-truncation CSS (display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;) into the CSS to Tailwind tab and it converts to line-clamp-3 in one step. line-clamp has shipped in Tailwind's core utilities since v3.3, so no plugin is required in a current project.

How do I add a text shadow in Tailwind?

Tailwind v3 has no built-in text-shadow utility at all, so a text-shadow declaration converts to the arbitrary-property syntax [text-shadow:...], which works without a plugin. Tailwind v4.1 added a small named text-shadow-2xs through text-shadow-lg scale, but because the exact preset values aren't part of Tailwind's stable, independently verifiable documentation the same way spacing and color are, this tool intentionally outputs the arbitrary-value form text-shadow-[...] in v4 mode too, since that is guaranteed to render pixel for pixel.

How do I use clip-path with Tailwind?

Tailwind has no built-in named clip-path utilities in either v3 or v4 core, so a clip-path declaration always converts to the arbitrary-property syntax, for example [clip-path:polygon(0_0,100%_0,50%_100%)]. That syntax has been valid since Tailwind v3.1 and works the same way in v4.

What's the Tailwind class for a CSS grid with grid-template-columns?

grid-template-columns: repeat(3, minmax(0, 1fr)) (or the shorter repeat(3, 1fr)) converts to grid-cols-3. Any other track pattern, like fixed pixel tracks or named grid areas, falls back to the arbitrary-value form, for example grid-cols-[200px_1fr_200px].

Can I convert a flexbox layout to Tailwind?

Yes. display: flex, flex-direction, flex-wrap, align-items, justify-content, gap, and the flex shorthand all convert directly, for example a display: flex; align-items: center; justify-content: space-between; gap: 16px; block becomes flex items-center justify-between gap-4.

Can Tailwind target :nth-child or other pseudo-class selectors?

nth-child is a selector, not a CSS declaration, so it isn't something this converter turns a property/value pair into. Tailwind handles it with an arbitrary variant instead, written directly in your markup: [&:nth-child(3)]:bg-blue-500 targets the third child the same way li:nth-child(3) { background-color: ... } would in plain CSS.

Does Tailwind have a grayscale or black-and-white filter utility?

Yes. filter: grayscale(1) converts to grayscale, and grayscale(0) (or omitting it) converts to grayscale-0. The same pattern applies to the other filter functions this tool supports: blur, brightness, contrast, hue-rotate, invert, saturate, and sepia.

Does Tailwind support CSS anchor positioning?

Not with dedicated utilities yet. CSS anchor positioning (anchor-name, position-anchor, and related properties) is still a newly landed browser feature, and neither Tailwind v3 nor v4 core ships named utilities for it as of this tool's last update, so those declarations fall back to the arbitrary-property syntax, for example [position-anchor:--my-anchor].

Why did my color convert to something like bg-[#1a2b3c] instead of a named class?

The converter only maps a color to a named utility, like bg-blue-500, when the hex value is an exact match for one of the 242 shades in Tailwind's default palette. A brand color, a design-tool export, or any color that's even one shade off won't have a named match, so it converts using the arbitrary-value syntax instead. That output is always visually correct, it just won't carry a palette name.