Free CSS to Tailwind Converter Online - Convert CSS to Tailwind Classes
Convert regular CSS to Tailwind CSS utility classes instantly. Free online CSS to Tailwind converter. No signup required.
Supports inline styles, CSS rules, style blocks, and @media queries
Switching from hand-written CSS to Tailwind means learning an entirely new vocabulary: padding: 0.5rem becomes p-2, display: flex becomes flex, and color: #3b82f6 becomes text-blue-500. Most of these mappings are intuitive once you know them, but discovering the right utility class for an unfamiliar property can stall your workflow for minutes at a time. This converter eliminates that friction. Paste any CSS declaration — a single property, a full rule block, or an entire stylesheet — and the tool returns the matching Tailwind utility classes instantly. It recognizes hover, focus, active, and disabled selectors and translates them into Tailwind modifier syntax. It converts @media queries into sm:, md:, lg:, xl:, and 2xl: prefixes. It even handles properties that require arbitrary value syntax when no default token matches. The result is a Tailwind class string you can drop straight into your HTML, ready for production.
Table of Contents
Step-by-Step: Converting CSS to Tailwind Utility Classes
Open the Converter tab and paste your CSS
Copy the CSS you want to translate — this can be a single declaration like display: flex, a complete rule like .card { background: white; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }, or multiple rules pasted at once. The input field accepts standard CSS syntax including selectors, braces, semicolons, and comments. Formatting does not matter; the parser handles minified, expanded, or mixed indentation styles.
Review the Tailwind class output
The converter processes your input and displays the equivalent Tailwind utility classes for each CSS rule. Properties that map directly to Tailwind's default theme produce clean semantic classes like bg-white, rounded-xl, and p-6. Properties with values that fall outside the default scale produce arbitrary-value classes using the bracket syntax, such as text-[17px] or bg-[#ff6b35]. Every conversion is shown with the original CSS alongside its Tailwind match so you can verify accuracy at a glance.
Handle pseudo-classes and responsive rules
CSS rules that use :hover, :focus, :active, :disabled, :first-child, :last-child, or :nth-child selectors are converted to Tailwind's modifier prefix syntax. A rule like a:hover { color: #1d4ed8; } becomes hover:text-blue-700. Media queries are converted to responsive prefixes: @media (min-width: 768px) { .element { display: grid; } } becomes md:grid. The converter preserves the full cascade logic in a compact class-string format.
Copy the result into your project
Click Copy to grab the generated Tailwind classes and paste them into your HTML class attribute, your JSX className, or your component file. The Share button generates a URL that recreates your exact conversion, which is useful for sharing results with teammates or bookmarking a conversion for later. The Save button stores your conversion locally so you can reload it without re-entering the CSS.
Which CSS Properties Convert Cleanly and Which Need Arbitrary Values
Properties with perfect 1-to-1 mappings
Display, positioning, flexbox, and grid properties almost always convert to clean semantic Tailwind classes. Display: flex becomes flex, justify-content: space-between becomes justify-between, position: relative becomes relative, and z-index: 50 becomes z-50. These mappings are unambiguous and produce classes that every Tailwind developer can read without thinking. The converter handles these instantly and with zero ambiguity.
Properties that depend on the theme scale
Spacing, typography, and color properties convert cleanly only when their values match a token in the Tailwind theme. Padding: 1rem becomes p-4 because 1rem equals the 4 spacing token. Font-size: 1.125rem becomes text-lg because that value matches the lg text scale. But font-size: 15px does not match any default token, so the converter outputs text-[15px] using arbitrary value syntax. If you want to avoid arbitrary values, adjust the input CSS to use values from the Tailwind scale before converting.
Properties with no Tailwind equivalent
Some CSS features have no direct Tailwind utility: scroll-snap-type, overscroll-behavior, touch-action, will-change, contain, and most @keyframes animations. The converter flags these as non-convertible and leaves them in raw CSS form so you can handle them separately, either by adding a custom utility in your Tailwind configuration or by keeping them in a traditional stylesheet alongside your Tailwind classes.
Complex selectors and inheritance
CSS selectors that rely on DOM structure — descendant combinators (.parent .child), sibling combinators (h2 + p), and attribute selectors ([data-active='true']) — cannot be expressed as Tailwind utility classes alone. The converter translates what it can (the property values) and indicates where a custom CSS rule or Tailwind's @apply directive is needed. For these cases, the tool provides the property-to-class mapping so you can construct the right selector manually.
CSS-to-Tailwind Quick Reference: Most Searched Conversions
Layout and Display Conversions
| CSS Property | Tailwind Class | Notes |
|---|---|---|
| display: flex | flex | Most common conversion |
| display: grid | grid | Grid layout |
| display: none | hidden | Hides element |
| display: inline-block | inline-block | Inline layout |
| position: absolute | absolute | Requires positioned parent |
| position: fixed | fixed | Fixed to viewport |
| position: sticky | sticky | Sticky scroll behavior |
| top: 0; right: 0; bottom: 0; left: 0 | inset-0 | All four sides at once |
| overflow: hidden | overflow-hidden | Clips content |
| overflow: auto | overflow-auto | Scrollable when needed |
Spacing and Sizing Conversions
| CSS Property | Tailwind Class | Notes |
|---|---|---|
| padding: 1rem | p-4 | All sides |
| padding: 0.5rem 1rem | px-4 py-2 | Horizontal and vertical |
| margin: 0 auto | mx-auto | Center horizontally |
| margin-top: 2rem | mt-8 | Top spacing only |
| gap: 1rem | gap-4 | Grid or flex gap |
| width: 100% | w-full | Full width |
| max-width: 72rem | max-w-6xl | Container constraint |
| height: 100vh | h-screen | Full viewport height |
| min-height: 0 | min-h-0 | Flex overflow fix |
Typography, Color, and Border Conversions
| CSS Property | Tailwind Class | Notes |
|---|---|---|
| font-size: 1.125rem | text-lg | Large text |
| font-weight: 700 | font-bold | Bold weight |
| line-height: 1.5 | leading-normal | Default line height |
| text-align: center | text-center | Centered text |
| color: #3b82f6 | text-blue-500 | Blue text color |
| background-color: #111827 | bg-gray-900 | Dark background |
| border-radius: 0.5rem | rounded-lg | Rounded corners |
| border: 1px solid #e5e7eb | border border-gray-200 | Light border |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1) | shadow-md | Medium shadow |
| opacity: 0.75 | opacity-75 | Transparency |
Real-World CSS to Tailwind Conversion Walkthroughs
Converting a card component from a Bootstrap-style stylesheet
Input CSS: .card { background-color: #ffffff; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.12); border: 1px solid #e5e7eb; } Output: bg-white rounded-xl p-6 shadow-sm border border-gray-200. Every property matches a default Tailwind token, so the output is clean and semantic. No arbitrary values are needed because the design happens to use standard spacing, color, and shadow scales.
Converting a navigation bar with hover and responsive behavior
Input CSS: .nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; } .nav a:hover { color: #1d4ed8; } @media (min-width: 768px) { .nav { padding: 1.5rem 2rem; } } Output: flex items-center justify-between px-6 py-4 md:px-8 md:py-6 for the container, and hover:text-blue-700 for each link. The media query becomes the md: prefix, and the :hover pseudo-class becomes the hover: modifier. Both responsive and interactive styles are expressed inline on the element.
Converting a CSS Grid layout with responsive columns
Input CSS: .grid-container { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } @media (min-width: 640px) { .grid-container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-container { grid-template-columns: repeat(3, 1fr); } } Output: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6. Three separate CSS rules compress into a single class string with responsive prefixes. The conversion reduces the code from 8 lines of CSS to one line of Tailwind classes while preserving identical behavior.
Converting CSS with values outside the default Tailwind scale
Input CSS: .hero { font-size: 52px; line-height: 1.1; letter-spacing: -0.02em; color: #0f172a; } Output: text-[52px] leading-tight tracking-tight text-slate-900. The font size 52px has no default token, so the converter uses the arbitrary value text-[52px]. The line-height and letter-spacing match leading-tight and tracking-tight respectively. The color #0f172a matches slate-900 exactly. This example shows the mix of semantic classes and arbitrary values that occurs in real conversions.
Who Benefits from a CSS-to-Tailwind Converter
Developers migrating an existing project to Tailwind
Migrating a production codebase from vanilla CSS, SASS, or LESS to Tailwind is typically a multi-week effort. The converter accelerates the process by handling the mechanical translation of property-value pairs into utility classes. Instead of looking up each property in the Tailwind documentation, you paste your stylesheet, get the class mappings, and apply them to your templates. This turns a lookup-heavy manual process into a copy-paste workflow that can be parallelized across team members.
Teams onboarding new developers onto Tailwind
When a team adopts Tailwind, existing developers often think in CSS properties while the codebase expects Tailwind classes. The converter acts as a learning bridge: a developer who knows CSS can type the property they want, see the Tailwind class, and gradually build the association in their memory. This is faster and more practical than reading documentation because the conversion happens in the context of the actual styles the developer is writing.
Designers converting Figma or Sketch CSS exports
Design tools like Figma export CSS properties when you copy styles from a layer. These exports use standard CSS syntax (font-size: 14px, color: #6b7280, border-radius: 8px) that needs to be translated into Tailwind classes before it can be used in a Tailwind project. The converter handles this translation instantly, closing the gap between the design tool's output format and the framework's input format.
WordPress and CMS developers adopting Tailwind
WordPress themes, Shopify stores, and other CMS platforms ship with their own CSS that uses custom selectors, media queries, and vendor-specific properties. Converting these stylesheets to Tailwind classes makes it possible to use the CMS alongside a Tailwind-based frontend. The converter handles the property-to-class mapping while you restructure the HTML templates to use the generated utility classes.
Developers working with third-party CSS libraries
Sometimes you need to integrate a third-party component — a date picker, a modal, a carousel — that ships with its own CSS. If the rest of your project uses Tailwind, you may want to translate that component's styles into Tailwind utilities for consistency. The converter processes the component's stylesheet and gives you the equivalent Tailwind classes, which you can then customize and maintain alongside your own code.
Writing CSS by Hand vs Using Tailwind Utility Classes
Naming and organization
Hand-written CSS requires you to invent class names for every element, which leads to naming conventions like BEM, SMACSS, or utility-based approaches. Tailwind eliminates the naming problem entirely: the utility class describes what the style does, not what the element is. A class like p-4 means padding of 1rem regardless of whether it is applied to a card, a button, or a header. This removes the cognitive overhead of maintaining a naming system and the conflicts that arise when multiple developers contribute to the same stylesheet.
File size and performance
A hand-written CSS file includes only the properties you write, so it starts small and grows linearly. Tailwind's source includes every utility, which is massive, but the build process purges unused classes to produce a final CSS file that is often smaller than the hand-written equivalent. The key difference is that with hand-written CSS you manually ensure no redundancy, while with Tailwind the build tool handles it automatically. For most projects, the purged Tailwind output is between 5KB and 15KB gzipped, which is competitive with or smaller than hand-written stylesheets.
Responsive and state styling
With hand-written CSS, responsive styles live in separate @media blocks that may be hundreds of lines away from the base rule. With Tailwind, responsive prefixes like md: and lg: keep the responsive behavior visible in the same line as the base style. This locality makes it easier to understand how an element behaves at every breakpoint without scrolling through a stylesheet. The converter preserves this advantage by translating @media rules into their corresponding Tailwind prefix syntax.
Design consistency and theme enforcement
Hand-written CSS gives you unlimited freedom to set any value, which leads to inconsistent spacing (12px in one place, 13px in another, 14px somewhere else). Tailwind's default scale restricts you to a curated set of values that are designed to look harmonious together. This constraint is the primary benefit of Tailwind: it enforces visual consistency by making the wrong values harder to type. When the converter produces an arbitrary value like text-[13px], it is a signal that the original design may benefit from adjusting to a standard scale value.
Why Some CSS Does Not Convert and How to Handle It
CSS animations and @keyframes
Tailwind does not provide utility classes for defining @keyframes animation sequences. The converter identifies animation-name, animation-duration, animation-timing-function, and animation-iteration-count properties and maps them to Tailwind's animation utilities (animate-spin, animate-ping, animate-bounce, animate-pulse) where possible. Custom @keyframes definitions cannot be expressed as utility classes and must remain in a CSS file or be added through the Tailwind configuration's extend.animation option.
CSS custom properties (variables)
Properties that use var(--my-custom-color) or var(--spacing-lg) have no direct Tailwind equivalent because the value depends on a runtime variable. The converter outputs an arbitrary-value class like text-[var(--my-custom-color)] when it encounters a CSS variable, which is valid Tailwind syntax but may not work with the Tailwind JIT compiler in all configurations. A better approach is to register your CSS variables as theme values in tailwind.config.js and use the semantic token name instead.
Pseudo-elements like ::before and ::after
Tailwind provides before: and after: modifiers for styling pseudo-elements, but they require the content property to be set via the before:content-[''] utility. The converter translates ::before and ::after rules into their Tailwind modifier equivalents, but you may need to add the content utility manually if it was inherited or implicit in the original CSS. Pseudo-elements with complex content values, background images, or positioning rules may need custom CSS alongside the generated classes.
Vendor-prefixed properties
Properties like -webkit-box-shadow, -moz-appearance, or -webkit-text-fill-color are browser-specific and have no Tailwind utility. The converter skips these and flags them as non-convertible. Modern CSS rarely needs vendor prefixes because Autoprefixer handles them during the build step. If your source CSS still contains prefixes, consider running it through an Autoprefixer-aware preprocessor before converting, which will normalize the properties to their standard equivalents.