What is the CSS to Tailwind Converter?

The CSS to Tailwind Converter translates standard CSS declarations into Tailwind CSS utility classes. Paste any CSS block — a selector with declarations, a single property, or multiple rules — and the tool outputs the equivalent @apply directives instantly as you type. No build step, no configuration, no installation required.

---

How to Use It

1. Paste or type your CSS in the left editor. You can paste a full rule like .card { padding: 1.5rem; border-radius: 0.75rem; } or a bare list of declarations without a selector.
2. The Tailwind output appears immediately in the right editor, grouped by selector using @apply syntax.
3. Click Copy to copy the output to your clipboard, or switch between the input and output tabs on smaller screens.
4. Use the example buttons at the top to load common patterns — Button, Card, Flexbox layout, Grid, Typography, and Overlay — to see the converter in action.

---

Supported CSS Properties

The converter covers a broad range of CSS properties across every major category:

Spacing — padding, margin, and all individual sides (padding-top, margin-left, etc.) as well as logical properties (padding-block, margin-inline). Negative margins map to Tailwind's negative spacing prefix.

Sizing — width, height, min-width, max-width, min-height, max-height. Percentage values map to Tailwind fractions (50% → w-1/2), keyword values like min-content, max-content, and fit-content are supported, and arbitrary pixel or rem values fall back to bracket syntax.

Typography — font-size, font-weight, font-family, font-style, line-height, letter-spacing, text-align, text-decoration, text-transform, text-overflow, white-space, word-break, overflow-wrap, and vertical-align.

Colors — color, background-color, background, border-color, outline-color, fill, and stroke. Hex values, rgb() / rgba() values, and named CSS colors are all resolved to the nearest Tailwind palette color using Euclidean distance in RGB space.

Borders — border shorthand, border-width (all sides individually), border-style, border-radius (full shorthand and all four corners individually).

Flexbox — flex-direction, flex-wrap, align-items, align-self, align-content, justify-content, justify-items, justify-self, place-items, place-content, place-self, flex, flex-grow, flex-shrink, flex-basis, gap, row-gap, column-gap, and order.

Grid — grid-template-columns, grid-template-rows, grid-column, grid-row, and grid-auto-flow. Repeat patterns like repeat(3, 1fr) map to grid-cols-3.

Layout — display, position, top, right, bottom, left, inset, z-index, overflow, overflow-x, overflow-y, object-fit, object-position, float, clear, box-sizing, aspect-ratio, columns, and scroll-behavior.

Effects — opacity, box-shadow, backdrop-filter, filter, mix-blend-mode, isolation, and outline.

Transforms — transform shorthand is parsed to extract individual functions: translateX, translateY, rotate, scale, scaleX, scaleY, skewX, and skewY.

Transitions and animations — transition, transition-property, transition-duration, transition-timing-function, transition-delay, and animation.

Interactivity — cursor, pointer-events, user-select, resize, appearance, and visibility.

SVG — fill, stroke, and stroke-width.

---

Arbitrary Value Fallback

When a property value does not map to a standard Tailwind scale — for example a custom pixel value not in the default spacing scale, or a complex CSS function — the converter outputs it using Tailwind's arbitrary value syntax: w-[347px], rotate-[23deg], bg-[#1a2b3c]. This means the output is always valid Tailwind, even when an exact scale match is not possible.

---

Color Matching

Color conversion maps hex, rgb, and named CSS colors to the nearest Tailwind color using a closest-match algorithm across the full Tailwind v3 color palette. The result is the Tailwind color that most closely resembles the original. For exact color matches that must remain pixel-perfect, use the arbitrary bracket syntax: text-[#3f65a1].

---

What the Output Format Means

The converter outputs @apply directives, which is how you use Tailwind classes inside a CSS file or a CSS-in-JS context:

.btn {
  @apply inline-flex items-center px-4 py-2 bg-blue-500 text-white font-semibold text-sm rounded-lg cursor-pointer;
}

You can paste this directly into a .css file, a <style> block, or a CSS module alongside your component. If you prefer a flat class list for pasting directly into a className attribute, copy the output and remove the selector and @apply wrapper manually.

---

Privacy

All conversion happens locally in your browser. No CSS is sent to any server or stored anywhere.