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 Property | Tailwind Class |
|---|---|
display: none | hidden |
display: block | block |
display: inline | inline |
display: inline-block | inline-block |
display: flex | flex |
display: inline-flex | inline-flex |
display: grid | grid |
Flexbox
| CSS Property | Tailwind Class |
|---|---|
flex-direction: row | flex-row |
flex-direction: column | flex-col |
flex-wrap: wrap | flex-wrap |
flex-wrap: nowrap | flex-nowrap |
justify-content: center | justify-center |
justify-content: space-between | justify-between |
align-items: center | items-center |
align-items: flex-start | items-start |
gap: 16px | gap-4 |
Spacing
| CSS Property | Tailwind Class |
|---|---|
margin: 16px | m-4 |
margin-top: 8px | mt-2 |
margin: 8px 16px | my-2 mx-4 |
padding: 16px | p-4 |
padding: 8px 16px | py-2 px-4 |
padding-left: 24px | pl-6 |
Typography
| CSS Property | Tailwind Class |
|---|---|
font-size: 14px | text-sm |
font-size: 16px | text-base |
font-size: 24px | text-2xl |
font-weight: 400 | font-normal |
font-weight: 600 | font-semibold |
font-weight: 700 | font-bold |
text-align: center | text-center |
text-decoration: underline | underline |
text-transform: uppercase | uppercase |
Colors
| CSS Property | Tailwind Class |
|---|---|
color: #fff | text-white |
color: #3b82f6 | text-blue-500 |
background-color: #fff | bg-white |
background-color: #3b82f6 | bg-blue-500 |
border-color: #e5e7eb | border-gray-200 |
Sizing
| CSS Property | Tailwind Class |
|---|---|
width: 100% | w-full |
width: 50% | w-1/2 |
height: 100% | h-full |
max-width: 1280px | max-w-7xl |
min-height: 100vh | min-h-screen |
Border
| CSS Property | Tailwind Class |
|---|---|
border-width: 1px | border |
border-width: 2px | border-2 |
border-style: dashed | border-dashed |
border-radius: 4px | rounded |
border-radius: 8px | rounded-lg |
border-radius: 9999px | rounded-full |
Position
| CSS Property | Tailwind Class |
|---|---|
position: relative | relative |
position: absolute | absolute |
position: fixed | fixed |
position: sticky | sticky |
top: 0 | top-0 |
inset: 0 | inset-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 16pxare expanded tomy-2 mx-4
Learn more
Step-by-step guide
How to Convert Tailwind Classes to CSS
Step-by-step guide to seeing the raw CSS that Tailwind utility classes produce using the DevHexLab Tailwind Class Converter.
In-depth article
Tailwind CSS to Plain CSS: When and How to Convert
Tailwind's utility classes are powerful but not always portable. Learn what Tailwind classes mean in CSS terms and how to extract plain CSS from any Tailwind component.