Free Reference
CSS to Tailwind Cheat Sheet
The quick-reference guide for converting CSS properties to Tailwind utility classes. Search by property name, CSS value, or Tailwind class. Click to copy.
195 results
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
display | block | block |
display | inline-block | inline-block |
display | inline | inline |
display | flex | flex |
display | inline-flex | inline-flex |
display | grid | grid |
display | none | hidden |
position | static | static |
position | relative | relative |
position | absolute | absolute |
position | fixed | fixed |
position | sticky | sticky |
float | left | float-left |
float | right | float-right |
float | none | float-none |
overflow | auto | overflow-auto |
overflow | hidden | overflow-hidden |
overflow | scroll | overflow-scroll |
overflow | visible | overflow-visible |
z-index | 0 | z-0 |
z-index | 10 | z-10 |
z-index | 50 | z-50 |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
flex-direction | row | flex-row |
flex-direction | column | flex-col |
flex-direction | row-reverse | flex-row-reverse |
flex-direction | column-reverse | flex-col-reverse |
flex-wrap | wrap | flex-wrap |
flex-wrap | nowrap | flex-nowrap |
justify-content | flex-start | justify-start |
justify-content | center | justify-center |
justify-content | flex-end | justify-end |
justify-content | space-between | justify-between |
justify-content | space-around | justify-around |
justify-content | space-evenly | justify-evenly |
align-items | flex-start | items-start |
align-items | center | items-center |
align-items | flex-end | items-end |
align-items | stretch | items-stretch |
align-items | baseline | items-baseline |
flex | 1 1 0% | flex-1 |
flex | 1 1 auto | flex-auto |
flex | none | flex-none |
gap | 0.25rem | gap-1 |
gap | 0.5rem | gap-2 |
gap | 1rem | gap-4 |
gap | 1.5rem | gap-6 |
gap | 2rem | gap-8 |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
grid-template-columns | repeat(1, minmax(0, 1fr)) | grid-cols-1 |
grid-template-columns | repeat(2, minmax(0, 1fr)) | grid-cols-2 |
grid-template-columns | repeat(3, minmax(0, 1fr)) | grid-cols-3 |
grid-template-columns | repeat(4, minmax(0, 1fr)) | grid-cols-4 |
grid-template-columns | repeat(12, minmax(0, 1fr)) | grid-cols-12 |
grid-column | span 2 / span 2 | col-span-2 |
grid-column | span 3 / span 3 | col-span-3 |
grid-column | 1 / -1 | col-span-full |
grid-template-rows | repeat(1, minmax(0, 1fr)) | grid-rows-1 |
grid-template-rows | repeat(3, minmax(0, 1fr)) | grid-rows-3 |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
padding | 0 | p-0 |
padding | 0.25rem | p-1 |
padding | 0.5rem | p-2 |
padding | 1rem | p-4 |
padding | 1.5rem | p-6 |
padding | 2rem | p-8 |
padding-left / padding-right | 1rem | px-4 |
padding-top / padding-bottom | 1rem | py-4 |
margin | 0 | m-0 |
margin | auto | m-auto |
margin | 0.25rem | m-1 |
margin | 0.5rem | m-2 |
margin | 1rem | m-4 |
margin | 2rem | m-8 |
margin-left / margin-right | auto | mx-auto |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
width | 100% | w-full |
width | auto | w-auto |
width | 100vw | w-screen |
width | fit-content | w-fit |
width | min-content | w-min |
width | max-content | w-max |
height | 100% | h-full |
height | 100vh | h-screen |
height | auto | h-auto |
min-width | 0 | min-w-0 |
min-width | 100% | min-w-full |
max-width | 100% | max-w-full |
max-width | 28rem | max-w-md |
max-width | 32rem | max-w-lg |
max-width | 36rem | max-w-xl |
max-width | 42rem | max-w-2xl |
max-width | 80rem | max-w-7xl |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
font-size | 0.75rem | text-xs |
font-size | 0.875rem | text-sm |
font-size | 1rem | text-base |
font-size | 1.125rem | text-lg |
font-size | 1.25rem | text-xl |
font-size | 1.5rem | text-2xl |
font-size | 1.875rem | text-3xl |
font-size | 2.25rem | text-4xl |
font-weight | 100 | font-thin |
font-weight | 300 | font-light |
font-weight | 400 | font-normal |
font-weight | 500 | font-medium |
font-weight | 600 | font-semibold |
font-weight | 700 | font-bold |
text-align | left | text-left |
text-align | center | text-center |
text-align | right | text-right |
text-align | justify | text-justify |
line-height | 1 | leading-none |
line-height | 1.25 | leading-tight |
line-height | 1.5 | leading-normal |
line-height | 2 | leading-loose |
letter-spacing | -0.05em | tracking-tighter |
letter-spacing | 0em | tracking-normal |
letter-spacing | 0.1em | tracking-widest |
text-decoration | underline | underline |
text-decoration | line-through | line-through |
text-decoration | none | no-underline |
text-transform | uppercase | uppercase |
text-transform | lowercase | lowercase |
text-transform | capitalize | capitalize |
white-space | nowrap | whitespace-nowrap |
word-break | break-all | break-all |
overflow-wrap | break-word | break-words |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
color | inherit | text-inherit |
color | transparent | text-transparent |
color | #000 | text-black |
color | #fff | text-white |
background-color | transparent | bg-transparent |
background-color | #000 | bg-black |
background-color | #fff | bg-white |
color | rgb(59 130 246) | text-blue-500 |
color | rgb(239 68 68) | text-red-500 |
color | rgb(34 197 94) | text-green-500 |
background-color | rgb(59 130 246) | bg-blue-500 |
background-color | rgb(239 68 68) | bg-red-500 |
color | rgb(107 114 128) | text-gray-500 |
background-color | rgb(249 250 251) | bg-gray-50 |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
border-width | 0 | border-0 |
border-width | 1px | border |
border-width | 2px | border-2 |
border-width | 4px | border-4 |
border-radius | 0 | rounded-none |
border-radius | 0.125rem | rounded-sm |
border-radius | 0.25rem | rounded |
border-radius | 0.375rem | rounded-md |
border-radius | 0.5rem | rounded-lg |
border-radius | 0.75rem | rounded-xl |
border-radius | 9999px | rounded-full |
border-style | solid | border-solid |
border-style | dashed | border-dashed |
border-style | dotted | border-dotted |
border-style | none | border-none |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
opacity | 0 | opacity-0 |
opacity | 0.5 | opacity-50 |
opacity | 0.75 | opacity-75 |
opacity | 1 | opacity-100 |
box-shadow | 0 1px 2px 0 rgb(0 0 0 / 0.05) | shadow-sm |
box-shadow | 0 1px 3px 0 rgb(0 0 0 / 0.1), ... | shadow |
box-shadow | 0 4px 6px -1px rgb(0 0 0 / 0.1), ... | shadow-md |
box-shadow | 0 10px 15px -3px rgb(0 0 0 / 0.1), ... | shadow-lg |
box-shadow | 0 20px 25px -5px rgb(0 0 0 / 0.1), ... | shadow-xl |
box-shadow | none | shadow-none |
mix-blend-mode | multiply | mix-blend-multiply |
mix-blend-mode | screen | mix-blend-screen |
mix-blend-mode | overlay | mix-blend-overlay |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
transition-property | all | transition-all |
transition-property | color, background-color, ... | transition |
transition-property | color | transition-colors |
transition-property | opacity | transition-opacity |
transition-property | transform | transition-transform |
transition-property | none | transition-none |
transition-duration | 75ms | duration-75 |
transition-duration | 150ms | duration-150 |
transition-duration | 200ms | duration-200 |
transition-duration | 300ms | duration-300 |
transition-duration | 500ms | duration-500 |
transition-timing-function | ease-in | ease-in |
transition-timing-function | ease-out | ease-out |
transition-timing-function | ease-in-out | ease-in-out |
transition-timing-function | linear | ease-linear |
| CSS Property | CSS Value | Tailwind Class |
|---|---|---|
transform | translateX(0) | translate-x-0 |
transform | translateX(100%) | translate-x-full |
transform | translateY(-100%) | -translate-y-full |
transform | rotate(0deg) | rotate-0 |
transform | rotate(45deg) | rotate-45 |
transform | rotate(90deg) | rotate-90 |
transform | rotate(180deg) | rotate-180 |
transform | scale(0) | scale-0 |
transform | scale(0.5) | scale-50 |
transform | scale(0.75) | scale-75 |
transform | scale(1) | scale-100 |
transform | scale(1.5) | scale-150 |
transform-origin | center | origin-center |
transform-origin | top | origin-top |
transform-origin | bottom-right | origin-bottom-right |
{TIPS}
CSS to Tailwind conversion tips
1
Map properties, not selectors
Tailwind replaces individual CSS declarations, not entire rule blocks. Break your CSS into single-property declarations and find the matching utility class for each one. A rule with 5 declarations turns into 5 utility classes on one element.
2
Use the spacing scale
Tailwind uses a consistent spacing scale where 1 unit equals 0.25rem (4px at default font size). So p-4 is 1rem, m-8 is 2rem. Once you learn the pattern, you can calculate any spacing value without a reference.
3
Responsive and state variants
Prefix any class with a breakpoint like md: or a state like hover: to apply it conditionally. For example, md:flex replaces a @media (min-width: 768px) block with display: flex.
4
Arbitrary values for edge cases
When a CSS value does not map to a built-in Tailwind class, use the arbitrary value syntax: w-[137px] or bg-[#1da1f2]. This keeps everything in the utility-first pattern without needing custom CSS.
5
Automate the tedious parts
For large-scale conversions, manual lookup gets slow. The ExtractCSS HTML & CSS to Tailwind converter handles entire stylesheets at once, snapping values to the nearest Tailwind token and resolving specificity conflicts automatically.
Takes 10 Seconds to Install
Extract your first component in the next 60 seconds
Install the extension. Navigate to any website. Click the component you want. Get clean Tailwind code. It really is that simple.