CSS to Tailwind Converter
Paste your CSS rules and get equivalent Tailwind CSS utility classes instantly.
About This Tool
The CSS to Tailwind Converter is a free browser-based tool that translates plain CSS declarations into their equivalent Tailwind CSS utility classes. If you are migrating an existing project from traditional CSS to a utility-first workflow, or you simply want to learn which Tailwind class corresponds to a given CSS property, this tool provides instant, readable output without requiring any installation or build step.
Tailwind CSS has become one of the most popular CSS frameworks
because of its utility-first approach. Instead of writing custom
class names and separate stylesheets, developers compose styles
directly in their markup using small, single-purpose classes
like flex, items-center,
p-4, and text-lg. This approach
reduces context-switching between HTML and CSS files, eliminates
naming debates, and keeps the resulting CSS bundle small through
automatic dead-code removal.
This converter supports a wide range of CSS properties including
layout (display, position,
flexbox, grid), spacing (
padding, margin, gap),
sizing (width, height,
max-width), typography (font-size,
font-weight, line-height,
text-align), colors (
background-color, color,
border-color), borders, border-radius, box-shadow,
opacity, z-index, overflow, cursor, transitions, and many more.
Common hex color values are mapped to their closest Tailwind
color palette names (e.g., #3b82f6 becomes
bg-blue-500).
All processing happens entirely in your browser using native JavaScript. Your CSS code never leaves your machine — there are no server round-trips, no logging, and no third-party analytics on your input. This makes it safe for proprietary stylesheets and internal codebases.
Properties that cannot be directly mapped to a standard Tailwind utility class are displayed as comments in the output, so you always know what needs manual attention or a custom Tailwind configuration.
How to Use
- Paste your CSS rules into the CSS Input panel on the left. Each rule should include a selector and a set of declarations in curly braces.
- The tool automatically converts the CSS to Tailwind classes when Auto-convert is enabled. Otherwise, click the Convert button or press Ctrl+Enter.
- Review the Tailwind Output on the right. Each CSS selector is shown as a comment, followed by a
class="..."string containing the mapped Tailwind classes. - Any CSS properties that could not be mapped appear as comments labeled Unmapped properties. These may require custom Tailwind config or manual conversion.
- Click Copy to copy the output, or use Clear to reset both panels.
- Use the Sample button to load example CSS and see how the converter handles various properties.
- Keyboard shortcuts: Ctrl+Enter to convert, Ctrl+Shift+C to copy output.
FAQ
Is my CSS data safe?
Yes. All parsing and conversion happens entirely in your browser using JavaScript. No data is sent to any server, and nothing is logged or stored. You can safely paste proprietary stylesheets.
Which CSS properties are supported?
The converter supports the most commonly used CSS properties including display, position, padding, margin, width, height, max-width, flexbox (direction, wrap, align, justify), grid (columns, rows, gap), font-size, font-weight, line-height, text-align, colors (background, text, border), border-radius, border, box-shadow, opacity, z-index, overflow, cursor, transitions, visibility, pointer-events, user-select, and more.
What happens with unsupported CSS properties?
Properties that cannot be mapped to a standard Tailwind utility class are shown as comments in the output (e.g., /* background: linear-gradient(...) */). This helps you identify what needs manual conversion or a custom Tailwind plugin or configuration.
Does it handle color values?
Yes. The converter recognizes common hex color values from the Tailwind default color palette (e.g., #3b82f6 maps to blue-500). Hex values that do not match a standard Tailwind color will be shown as unmapped. Named values like transparent, currentColor, and inherit are also supported.
Does it support shorthand CSS properties?
Yes. Common shorthand properties like padding (with 1, 2, 3, or 4 values), margin, border (e.g., 1px solid #e5e7eb), and gap are parsed and split into individual Tailwind classes. For example, padding: 1rem 2rem becomes py-4 px-8.
Does it handle !important?
Yes. If a CSS declaration ends with !important, the corresponding Tailwind class is prefixed with ! (e.g., !p-4), which is the Tailwind convention for applying important modifiers.
What keyboard shortcuts are available?
Ctrl+Enter triggers the conversion, and Ctrl+Shift+C copies the Tailwind output to your clipboard.
Related Tools
CSS Layout Generator
Visually build Flexbox and CSS Grid layouts with live preview and generated CSS code.
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
px ↔ rem Converter
Convert between px, rem, and em CSS units with a configurable base font size and quick-reference table.
Code Minifier
Minify and beautify JavaScript, CSS, and HTML code with size comparison stats.
CSS Variable Generator
Design color theme systems with CSS custom properties. Auto-generate shade scales, semantic tokens, and dark mode variants.
Viewport Size Reference
Browse 60+ device viewport sizes for responsive web design. Compare iPhone, iPad, Android, laptop, desktop, and TV screen dimensions.
Font Stack Builder
Build CSS font-family stacks with drag-and-drop reordering, live preview, and popular presets for system, serif, sans-serif, and monospace fonts.
Color Palette Extractor
Extract dominant color palettes from images with HEX, RGB, HSL values. Export as CSS variables, Tailwind config, JSON, or SVG.
Tailwind Config Builder
Build tailwind.config.js visually with custom colors, spacing, fonts, and breakpoints.