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.
This cheat sheet maps every common CSS property and value to its equivalent Tailwind CSS utility class. Use the search bar to find any mapping instantly, or browse by category. Each entry includes a visual preview showing exactly what the class produces.
Quick Reference: Top 20 Mappings
The most commonly searched CSS-to-Tailwind conversions. For the full 450+ mapping list, use the interactive search below.
| CSS | Tailwind Class |
|---|---|
display: flex | flex |
display: grid | grid |
display: none | hidden |
position: relative | relative |
position: absolute | absolute |
justify-content: center | justify-center |
align-items: center | items-center |
padding: 16px | p-4 |
margin: 0 auto | mx-auto |
width: 100% | w-full |
max-width: 768px | max-w-3xl |
font-size: 14px | text-sm |
font-weight: 700 | font-bold |
text-align: center | text-center |
color: #ef4444 | text-red-500 |
background-color: #3b82f6 | bg-blue-500 |
border-radius: 8px | rounded-lg |
box-shadow: 0 1px 3px | shadow-sm |
opacity: 0.5 | opacity-50 |
cursor: pointer | cursor-pointer |
CSS to Tailwind conversion tips
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.
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.
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.
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.
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.
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.