DevBolt
Processed in your browser. Your data never leaves your device.

How do I convert CSS to Tailwind utility classes?

Paste your CSS rules and instantly see the equivalent Tailwind utility classes for 100+ properties — layout, spacing, typography, borders, effects, transforms, and more. The tool handles shorthand expansion and shows any unconverted properties. Everything runs in your browser.

Layout CSS to Tailwind
Input
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  gap: 8px;
}
Output
flex justify-center items-center p-4 gap-2
← Back to tools

CSS to Tailwind Converter

Paste CSS rules or inline styles and get the equivalent Tailwind CSS utility classes. Supports 100+ CSS properties including layout, spacing, typography, borders, and more.

Samples:
Paste CSS to see Tailwind classes

Supported CSS Properties

Layout
display, position, top/right/bottom/left, inset, z-index, overflow, visibility, box-sizing
Flexbox
flex-direction, flex-wrap, flex, flex-grow, flex-shrink, order, justify-content, align-items, align-self, align-content
Grid
grid-template-columns, grid-template-rows, gap, row-gap, column-gap, place-content, place-items
Spacing
padding (all sides), margin (all sides), width, height, min/max width/height
Typography
font-size, font-weight, font-style, font-family, line-height, letter-spacing, text-align, text-decoration, text-transform, white-space, word-break, text-overflow, vertical-align
Colors
color, background-color, border-color (named + hex black/white)
Borders
border, border-width, border-style, border-radius, outline, outline-offset
Effects
opacity, box-shadow, cursor, pointer-events, user-select, transition, transform, mix-blend-mode, will-change
Misc
object-fit, object-position, aspect-ratio, resize, appearance, scroll-behavior, list-style, table-layout, border-collapse, columns, content, isolation, accent-color

About CSS to Tailwind Converter

  • 100+ properties — converts layout, spacing, typography, borders, effects, and more.
  • Full selectors — handles class rules, ID rules, or bare inline style declarations.
  • Shorthand parsing — expands padding, margin, and border shorthands into individual Tailwind classes.
  • Unconverted tracking — properties without a direct Tailwind equivalent are flagged so you know what needs custom CSS.
  • Everything runs in your browser — no data is sent over the network.

Tips & Best Practices

Pro Tip

Convert one component at a time, not the entire stylesheet

Migrating a full CSS file to Tailwind at once creates an overwhelming diff and high risk of regressions. Convert one component, verify it visually, commit, then move to the next. Incremental migration reduces review burden and bug risk.

Common Pitfall

Not every CSS property has a Tailwind utility — some need arbitrary values

Tailwind covers 95% of common CSS but misses edge cases like specific grid-template-areas or complex animations. Use arbitrary values `[property:value]` for one-offs, or keep a small custom CSS file for truly unique styles.

Real-World Example

CSS shorthand properties need to be expanded for Tailwind conversion

`margin: 10px 20px 30px` must be split into `mt-2.5 mx-5 mb-7.5` (or the nearest Tailwind spacing values). Shorthand properties like background, border, and font each decompose into multiple Tailwind utilities.

Security Note

Audit converted class names for accidentally exposed internal naming

CSS class names like .admin-panel, .internal-api-form, or .billing-secret sometimes reveal application structure. When converting to Tailwind, these class names are removed from the DOM — an incidental security improvement.

Frequently Asked Questions

How do I convert CSS to Tailwind utility classes?
Paste your CSS declarations into DevBolt's CSS to Tailwind Converter and it maps each property-value pair to the corresponding Tailwind utility class. For example, display: flex becomes flex, margin-top: 1rem becomes mt-4, font-size: 0.875rem becomes text-sm. The converter handles common CSS properties including layout, spacing, typography, colors, borders, shadows, and transforms. Properties that map to Tailwind's default scale are converted to named utilities, while custom values use arbitrary value syntax like mt-[13px]. This accelerates migration from traditional CSS codebases to Tailwind.
What CSS properties can be converted to Tailwind classes?
Most standard CSS properties have Tailwind equivalents. Layout properties like display, position, flex, and grid convert to utilities like flex, grid, absolute, and relative. Spacing properties (margin, padding) map to the spacing scale (m-4, p-6). Typography properties become text-lg, font-bold, leading-6, text-gray-700. Colors map to Tailwind's color palette when there is a match, or use arbitrary values for custom colors. Box model properties like width, height, border, and border-radius have direct equivalents. Some features like complex selectors and media queries require Tailwind modifiers (hover:, md:, focus:) rather than direct conversion.
How do I handle custom CSS values that don't match Tailwind's default scale?
Tailwind supports arbitrary values using bracket syntax for any property that does not match the default scale. A margin of 13px becomes mt-[13px], a custom color becomes bg-[#1a2b3c], and a specific width becomes w-[calc(100%-2rem)]. DevBolt's converter automatically detects when a CSS value does not match a default utility and generates the arbitrary value syntax. For values you use frequently, extend Tailwind's theme in tailwind.config.js instead of using arbitrary values throughout your codebase. You can add custom spacing, colors, and font sizes in theme.extend to generate proper named utilities.

Related Convert Tools

SVG

SVG to JSX Converter

Convert SVG to JSX or a React/TypeScript component — camelCase attributes, style objects, forwardRef, memo, props spread

API

OpenAPI to TypeScript

Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types

ZOD

JSON to Zod Converter

Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields

GQL

GraphQL to TypeScript

Convert GraphQL SDL schemas to TypeScript interfaces, types, enums, unions, and operations