WebToolsPlanet
css Tools

CSS to Tailwind Converter

Convert CSS declarations to Tailwind CSS utility classes — supports margin, padding, flex, grid, typography, colors, and arbitrary value fallbacks.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is CSS to Tailwind Converter?

Tailwind CSS is a utility-first CSS framework that replaces traditional CSS rule sets with composable single-purpose classes applied directly in HTML: `class="flex items-center justify-between p-4 bg-white rounded-lg"`. While Tailwind is faster to write for new greenfield projects, migrating an existing CSS codebase means manually looking up which Tailwind class corresponds to each declaration — a slow, error-prone process.

This converter automates that lookup: paste any CSS declaration block and receive the equivalent Tailwind class string. The converter handles the most common CSS properties — display, flexbox (flex, align-items, justify-content), grid, margin, padding, width, height, font-size, font-weight, text-align, border, border-radius, background-color, color, position, overflow, opacity, cursor, and z-index. Values that map directly to Tailwind's default scale produce named classes (e.g., `p-4` for `padding: 1rem`). Values that don't match the Tailwind scale produce arbitrary value classes (e.g., `w-[130px]`) using Tailwind v3+'s JIT arbitrary value syntax.

How to Use CSS to Tailwind Converter

1

Paste a CSS rule block into the left panel — include the declarations but not necessarily the selector (e.g., just `display: flex; align-items: center;`)

2

Click "Convert" to generate the equivalent Tailwind class string

3

Review the output: matched classes show in blue, arbitrary-value classes show in yellow, and unsupported properties appear as HTML comments for manual handling

4

Copy the class string and apply it to your HTML element's `class` attribute

5

For full rule sets with selectors, each selector's declarations are converted separately — paste one selector at a time for clearest output

Common Use Cases

  • Migrating a legacy CSS stylesheet to Tailwind during a frontend framework upgrade
  • Learning which Tailwind class corresponds to a specific CSS property while transitioning from traditional CSS
  • Converting a design token system (CSS custom properties with specific values) to Tailwind theme extensions
  • Translating component styles from a CSS module file to Tailwind classes during a React component refactor
  • Converting Bootstrap override CSS to Tailwind equivalents during a migration from Bootstrap to Tailwind
  • Understanding Tailwind's spacing scale by seeing which CSS pixel values map to which Tailwind number codes
  • Converting styles from a Figma CSS export (Figma's "Copy as CSS" feature) to Tailwind classes
  • Generating Tailwind classes for a one-off element that needs specific styles outside your existing design system

Example Input and Output

Converting a CSS flexbox card component to Tailwind classes:

CSS input
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  max-width: 24rem;
}
Tailwind class output
<!-- Tailwind classes -->
<div class="flex flex-col items-start p-6 bg-white rounded-lg border border-gray-200 shadow-sm max-w-sm">

Mapping breakdown:
  display: flex          → flex
  flex-direction: column → flex-col
  align-items: flex-start→ items-start
  padding: 1.5rem        → p-6
  background-color:#fff  → bg-white
  border-radius: 0.5rem  → rounded-lg
  border: 1px solid ...  → border border-gray-200
  box-shadow: ...        → shadow-sm
  max-width: 24rem       → max-w-sm

Client-Side Processing

All CSS parsing and Tailwind class mapping runs in your browser. Your CSS code is never sent to our servers.

Extending Tailwind for Off-Scale Values

If the converter frequently produces arbitrary values like w-[130px] or p-[7px], your design uses values outside Tailwind's default scale. Add your design tokens to tailwind.config.js: extend: { spacing: { 13: "3.25rem", 18: "4.5rem" } }. This makes them available as w-13, p-18 etc. and removes the need for arbitrary value syntax. Run npx tailwindcss --init to create a config file if you don't have one.

Tailwind CSS IntelliSense for VS Code

Install the official Tailwind CSS IntelliSense extension (bradlc.vscode-tailwindcss) to get autocomplete, hover previews, and linting for Tailwind classes in VS Code. As you apply converted classes to your HTML, IntelliSense shows what CSS each class generates on hover — making it easy to verify the conversion was correct without leaving your editor. The extension also warns when you use conflicting classes (e.g., both p-4 and px-2).

Frequently Asked Questions

What Tailwind version does this converter target?
The converter targets Tailwind CSS v3 class names and the JIT (Just-in-Time) arbitrary value syntax. Tailwind v4 (released 2024) changes some class names and uses CSS-native variables — major changes include: text-sm/font-size values adjusted, shadow syntax updates, and new CSS variable architecture. v4 is still backward-compatible for most utility classes. Toggle "Tailwind v4" in the settings to apply v4-specific naming changes where they differ.
What happens when a CSS value doesn't match Tailwind's default scale?
Tailwind's default spacing scale: 0, 0.5 (0.125rem), 1 (0.25rem), 2 (0.5rem), 3 (0.75rem), 4 (1rem), 5 (1.25rem), 6 (1.5rem), 8 (2rem), 10 (2.5rem), 12 (3rem), 16 (4rem), 20 (5rem), 24 (6rem). If your value is between scale steps (e.g., padding: 7px = 0.4375rem), the converter produces an arbitrary value class: p-[7px]. Arbitrary values work with Tailwind v3+ JIT mode and are fully valid, but it's worth considering if the value should be added to your tailwind.config.js theme extension instead.
How does the converter handle CSS shorthand properties?
CSS shorthand like margin: 16px 8px (vertical 16px, horizontal 8px) is expanded into directional Tailwind classes: my-4 mx-2. Similarly: padding: 0 1rem (→ py-0 px-4), border: 1px solid #e5e7eb (→ border border-gray-200), and background: #1a1a2e (→ bg-[#1a1a2e] for non-standard colors). For 4-value shorthands (margin: top right bottom left), each direction gets its own class: mt-4 mr-2 mb-4 ml-2.
What CSS properties are not supported?
Properties with no direct Tailwind equivalent appear as HTML comments so you know they need manual handling: complex `background` gradients (use Tailwind's bg-gradient-* instead), `animation` declarations (use animate-* for built-in animations or custom), `@keyframes` definitions, `::before`/`::after` pseudo-elements (use the before: and after: variants in Tailwind v3+), CSS custom property (variable) assignments, and complex `box-shadow` values with multiple layers.
How do I handle hover, focus, and responsive styles?
Tailwind uses variant prefixes: hover:bg-blue-500, focus:ring-2, md:flex-row. This converter translates the base CSS declarations. For interactive states (CSS :hover { } blocks), the converter outputs the base classes and notes that variant prefixes need to be added manually. For responsive breakpoints (CSS @media queries), the equivalent Tailwind breakpoint prefixes are noted: Tailwind breakpoints are sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px).
Should I convert everything to Tailwind or keep some custom CSS?
Not everything converts cleanly to Tailwind. Best kept as custom CSS: complex SVG path styles, @keyframes animations, pseudo-element content (::before { content: "" }), CSS grid template definitions with named areas (grid-template-areas), and highly specific styles that appear only once globally. Tailwind works best for component-level styling of layout, spacing, color, and typography. Combine Tailwind with a thin custom CSS layer (@layer components or @layer utilities) for the cases Tailwind handles poorly.

How This Tool Works

CSS input is tokenized into property-value pairs using a CSS declaration parser. Each property is matched against a lookup table mapping CSS property + value patterns to Tailwind class names. Spacing values are normalized to rem and matched against Tailwind's spacing scale (multiples of 0.25rem). For color values, hex colors are compared against Tailwind's default palette; exact matches produce named classes (bg-gray-200), unrecognized hex colors produce arbitrary value classes (bg-[#custom]). Unrecognized properties are emitted as /* unmapped: property: value */ comments.

Technical Stack

CSS declaration tokenizerTailwind v3/v4 class lookup tableSpacing scale matcherArbitrary value fallback generatorClient-side only

Related Tools

CSS Unit Converter
Convert between PX, REM, EM, VW, VH, and % CSS units — with configurable base font size and live conversion.
Box Shadow Generator
Create CSS box shadows with a visual editor.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
Border Radius Generator
Create complex CSS border-radius shapes with independent corner controls — from rounded buttons to organic blobs.
Flexbox Generator
Build CSS Flexbox layouts visually — configure every container and item property and get ready-to-use CSS.
CSS Grid Generator
Build CSS Grid layouts visually — configure columns, rows, gaps, and named areas and copy production-ready CSS.