CSS to Tailwind Converter
Free CSS to Tailwind converter. Paste your CSS code and get Tailwind utility classes instantly. Supports 100+ properties, arbitrary values, and pseudo-classes.
Paste CSS on the left to see Tailwind classes here
How to Convert CSS to Tailwind CSS
Converting CSS to Tailwind utility classes speeds up migration from traditional stylesheets to a utility-first workflow. Instead of writing separate CSS files with custom class names, Tailwind lets you style elements directly in your markup using pre-built utility classes like flex, p-4, and text-center.
This converter handles the mapping automatically. Paste any valid CSS-whether it is a single declaration, a full ruleset with selectors, or multiple blocks-and the tool parses each property-value pair into its Tailwind equivalent. Values that match Tailwind's default spacing scale (like 16px mapping to 4, because Tailwind's scale is based on 0.25rem increments) are converted to standard classes. Values outside the default scale use Tailwind's arbitrary value syntax with square brackets.
Paste your CSS
Enter your CSS code in the left panel. Supports selectors, single declarations, or full stylesheets.
Instant conversion
CSS is parsed and converted to Tailwind classes in real time as you type. No button clicks needed.
Copy and use
Copy individual selectors or all classes at once. Paste them directly into your HTML, JSX, or Vue templates.
Supported CSS Properties
The converter supports over 100 CSS properties across 10 categories. Properties with standard Tailwind equivalents are converted to named utility classes. Properties with non-standard values use Tailwind's arbitrary value syntax with square brackets, which works in Tailwind CSS v3 and later.
CSS vs Tailwind CSS: Why Convert?
Tailwind CSS uses a utility-first approach where styles are applied directly in your HTML using pre-built classes. This eliminates the need for custom CSS files, reduces naming conflicts, and makes refactoring easier. Here is a side-by-side comparison of writing the same component in both approaches.
.btn {
display: inline-flex;
align-items: center;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
background-color: #3b82f6;
border-radius: 8px;
transition-duration: 200ms;
}
.btn:hover {
background-color: #2563eb;
}<button class="
inline-flex items-center
py-2 px-4
text-sm font-medium
text-[#01161E] bg-blue-500
rounded-lg
duration-200
hover:bg-blue-600
">
Click me
</button>Common CSS to Tailwind Conversions
/* CSS */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
/* Tailwind */
flex flex-col justify-center items-center gap-4/* CSS */
padding: 24px;
max-width: 448px;
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
/* Tailwind */
p-6 max-w-md mx-auto my-0 bg-white border border-solid border-gray-200 rounded-xl/* CSS */
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.025em;
color: #111827;
text-align: center;
/* Tailwind */
text-2xl font-bold leading-tight tracking-tight text-gray-900 text-center/* CSS */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
place-items: center;
/* Tailwind */
grid grid-cols-3 gap-6 place-items-centerWhen to Use CSS vs Tailwind CSS
Frequently Asked Questions
How does a CSS to Tailwind converter work?
A CSS to Tailwind converter parses your CSS declarations and maps each property-value pair to the equivalent Tailwind CSS utility class. For example, display: flex becomes flex, padding: 16px becomes p-4, and color: #ef4444 becomes text-red-500. Properties that don't have a direct Tailwind equivalent are converted using arbitrary value syntax like w-[137px].
What CSS properties can be converted to Tailwind?
Most common CSS properties can be converted including display, position, margin, padding, width, height, font-size, font-weight, color, background-color, border, border-radius, flexbox properties (flex-direction, justify-content, align-items, gap), grid properties, opacity, overflow, cursor, transitions, transforms, and many more. Over 100 CSS properties are supported.
Does the converter support shorthand CSS properties?
Yes. Shorthand properties like margin: 16px 24px are correctly split into my-4 mx-6. Border shorthand like border: 1px solid #e5e7eb becomes border border-solid border-gray-200. Padding with four values like padding: 8px 16px 12px 24px is converted to pt-2 pr-4 pb-3 pl-6.
What happens with CSS values that don't match Tailwind's default scale?
Values that don't match Tailwind's predefined scale are converted using arbitrary value syntax. For example, width: 137px becomes w-[137px], and font-size: 22px becomes text-[22px]. These arbitrary values work natively in Tailwind CSS v3 and later without any configuration.
Can I convert multiple CSS selectors at once?
Yes. Paste CSS with multiple selectors and each block is converted independently. The output shows the selector name alongside its Tailwind classes, so you know exactly which classes belong to which element.
Is this converter accurate for production use?
The converter handles the vast majority of common CSS properties accurately. However, complex shorthand properties, CSS custom properties (variables), and some newer CSS features may need manual review. Always test the generated Tailwind classes in your project to verify visual accuracy.
Does the converter handle CSS media queries?
Media queries require Tailwind's responsive prefix syntax (sm:, md:, lg:, xl:, 2xl:) which needs manual mapping since the breakpoint values differ between projects. The converter focuses on converting the CSS declarations inside the media query blocks.
What version of Tailwind CSS does this converter target?
This converter targets Tailwind CSS v3.x and later, which supports arbitrary values with bracket syntax. The utility class names and spacing scale follow Tailwind's default configuration. It also works with Tailwind v4 since the core utility names remain the same.
Can I convert CSS variables to Tailwind?
CSS custom properties (--my-color: #333) don't have a direct Tailwind equivalent since they serve a different purpose. However, when a variable is used as a value like color: var(--my-color), it is preserved using arbitrary syntax: text-[var(--my-color)].
How is this different from using Tailwind's @apply directive?
The @apply directive lets you use Tailwind classes inside CSS files, which is the opposite direction. This converter takes existing CSS and gives you the utility classes to use directly in your HTML or JSX. Converting to utility classes is preferred because it keeps styles co-located with markup and enables Tailwind's purging for smaller bundle sizes.
Why should I convert CSS to Tailwind instead of writing Tailwind directly?
Converting is useful when migrating existing projects from vanilla CSS or another framework to Tailwind CSS. It saves time when you have hundreds of CSS rules to convert manually. It is also helpful when copying CSS from design tools like Figma that export plain CSS.
Does the converter support pseudo-classes like :hover and :focus?
Pseudo-classes like :hover, :focus, and :active use Tailwind's variant prefix system (hover:, focus:, active:). The converter recognizes these selectors and outputs the appropriate variant prefixes for the converted classes.
Disclaimer: This tool provides automated CSS to Tailwind conversions. Complex shorthand properties, CSS variables, and some edge cases may require manual adjustment. Always verify the generated classes in your project.