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
E/D
Encode / Decode Multi-Tool
Base64, Base32, Hex, Binary, URL, and HTML encoding & decoding all in one tool
JSX
HTML to JSX Converter
Convert HTML to JSX instantly — class to className, inline styles to objects, self-closing tags, SVG attributes, event handlers, and more
< >
JSON to Code Generator
Generate typed code from JSON in 8 languages — Go, Python, Java, C#, Dart, Rust, Swift, Kotlin structs and classes
SVG
SVG to JSX Converter
Convert SVG to JSX or a React/TypeScript component — camelCase attributes, style objects, forwardRef, memo, props spread