devhexlab

Tailwind Class Converter

Enter a CSS property and get the equivalent Tailwind CSS class

tailwindcssconvertutilityclass

Tailwind Class Converter

CSS → Tailwind Converter

Paste CSS declarations (one per line, with or without semicolons). Common values will be matched to Tailwind classes.

Quick Reference

Display

CSS PropertyTailwind Class
display: nonehidden
display: blockblock
display: inlineinline
display: inline-blockinline-block
display: flexflex
display: inline-flexinline-flex
display: gridgrid

Flexbox

CSS PropertyTailwind Class
flex-direction: rowflex-row
flex-direction: columnflex-col
flex-wrap: wrapflex-wrap
flex-wrap: nowrapflex-nowrap
justify-content: centerjustify-center
justify-content: space-betweenjustify-between
align-items: centeritems-center
align-items: flex-startitems-start
gap: 16pxgap-4

Spacing

CSS PropertyTailwind Class
margin: 16pxm-4
margin-top: 8pxmt-2
margin: 8px 16pxmy-2 mx-4
padding: 16pxp-4
padding: 8px 16pxpy-2 px-4
padding-left: 24pxpl-6

Typography

CSS PropertyTailwind Class
font-size: 14pxtext-sm
font-size: 16pxtext-base
font-size: 24pxtext-2xl
font-weight: 400font-normal
font-weight: 600font-semibold
font-weight: 700font-bold
text-align: centertext-center
text-decoration: underlineunderline
text-transform: uppercaseuppercase

Colors

CSS PropertyTailwind Class
color: #ffftext-white
color: #3b82f6text-blue-500
background-color: #fffbg-white
background-color: #3b82f6bg-blue-500
border-color: #e5e7ebborder-gray-200

Sizing

CSS PropertyTailwind Class
width: 100%w-full
width: 50%w-1/2
height: 100%h-full
max-width: 1280pxmax-w-7xl
min-height: 100vhmin-h-screen

Border

CSS PropertyTailwind Class
border-width: 1pxborder
border-width: 2pxborder-2
border-style: dashedborder-dashed
border-radius: 4pxrounded
border-radius: 8pxrounded-lg
border-radius: 9999pxrounded-full

Position

CSS PropertyTailwind Class
position: relativerelative
position: absoluteabsolute
position: fixedfixed
position: stickysticky
top: 0top-0
inset: 0inset-0

Tips

  • Spacing values are mapped to Tailwind's 4px scale (e.g. 16px → 4, 24px → 6)
  • Unmapped values are shown as comments: you may need to use arbitrary values like p-[13px]
  • Colors must match exact hex values from the Tailwind palette to auto-convert
  • Shorthand properties like margin: 8px 16px are expanded to my-2 mx-4

Related Tools

CSS Formatter

Beautify and format compressed or minified CSS

CSS Minifier

Minify and compress CSS to reduce file size

CSS Gradient Generator

Build linear and radial gradients visually and copy the CSS