DevBolt
Processed in your browser. Your data never leaves your device.
← 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.

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