CSS to Tailwind Cheat Sheet for Buttons, Cards, and Navbars
Tailwind Conversion
Quick Answer
- Match each CSS property with its closest Tailwind utility using the cheat sheet below.
- Use responsive prefixes such as
md:and state variants such ashover:instead of writing separate media queries and pseudo-class rules. - Use arbitrary values such as
w-[37px]when the CSS value does not match a Tailwind design token. - Paste the finished class string into the free CSSPeek Tailwind Class Decoder to review the resolved CSS and catch unknown utilities.
A Tailwind class converter can speed up repetitive migrations, but conversion is not always one-to-one. Simple properties such as padding, color, border radius and flex alignment map cleanly. Complex selectors, animations and unusual values may still need arbitrary utilities or custom CSS.
This cheat sheet focuses on the conversions developers use most often when rebuilding buttons, cards and responsive navigation bars.
Tailwind v4 Reference
4 Current Tailwind Facts to Know
v4.3
Current documentation
The official Tailwind documentation currently displays version 4.3.
5
Default breakpoints
The default responsive prefixes are sm, md, lg, xl and 2xl.
7
Outer-shadow sizes
Tailwind v4 includes named shadows from shadow-2xs through shadow-2xl.
8
Radius scale values
The named radius scale runs from rounded-xs through rounded-4xl.
Jump to a Conversion
CSS to Tailwind Utility Cheat Sheet
| CSS | Tailwind Class | Purpose |
|---|---|---|
display: flex; |
flex |
Flex container |
align-items: center; |
items-center |
Vertical alignment |
justify-content: space-between; |
justify-between |
Distribute items |
gap: 1rem; |
gap-4 |
16px gap |
padding: 1.5rem; |
p-6 |
24px on every side |
padding: .75rem 1rem; |
px-4 py-3 |
Horizontal and vertical spacing |
margin-inline: auto; |
mx-auto |
Center a fixed-width block |
width: 100%; |
w-full |
Full available width |
max-width: 28rem; |
max-w-md |
Maximum width |
border-radius: .5rem; |
rounded-lg |
8px radius |
border: 1px solid #e5e7eb; |
border border-gray-200 |
Border width and color |
font-weight: 600; |
font-semibold |
Semibold text |
box-shadow: ...; |
shadow-md |
Medium preset shadow |
position: sticky; top: 0; |
sticky top-0 |
Sticky navigation |
For a property-by-property explanation, use CSSPeek’s broader CSS to Tailwind conversion guide.
Card Conversion: CSS to Tailwind
Original CSS
.product-card {
max-width: 448px;
margin: 0 auto;
padding: 24px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1);
}
.product-card h3 {
margin-bottom: 8px;
font-size: 20px;
font-weight: 700;
color: #111827;
}
.product-card p {
color: #6b7280;
line-height: 1.625;
}Tailwind Version
<article class="
mx-auto max-w-md rounded-2xl
border border-gray-200 bg-white
p-6 shadow-lg
">
<h3 class="mb-2 text-xl font-bold text-gray-900">
Product title
</h3>
<p class="leading-relaxed text-gray-500">
A short product description goes here.
</p>
</article>Tailwind utilities belong on the element they style. The parent card receives layout, surface and shadow classes, while the heading and paragraph receive their own typography utilities.
Need the exact shadow from an existing component? Run the page through the CSSPeek Site Style Report to extract complete shadow, radius, spacing and color values.
Convert CSS States into Tailwind Variants
| CSS Selector | Tailwind Prefix | Example |
|---|---|---|
:hover |
hover: |
hover:bg-blue-700 |
:focus-visible |
focus-visible: |
focus-visible:ring-2 |
:active |
active: |
active:scale-95 |
:disabled |
disabled: |
disabled:opacity-50 |
| Dark theme | dark: |
dark:bg-gray-900 |
Convert Media Queries into Responsive Classes
| Prefix | Default Minimum Width | Example |
|---|---|---|
sm: |
40rem / 640px | sm:grid-cols-2 |
md: |
48rem / 768px | md:flex |
lg: |
64rem / 1024px | lg:px-12 |
xl: |
80rem / 1280px | xl:max-w-7xl |
2xl: |
96rem / 1536px | 2xl:text-xl |
Tailwind is mobile-first. An unprefixed utility applies at every size, while a prefixed class applies from its breakpoint upward.
When to Use Arbitrary Tailwind Values
Use an arbitrary value when the original CSS is intentional but does not match the project’s spacing, color or shadow tokens.
| Original CSS | Tailwind |
|---|---|
width: 37px; |
w-[37px] |
background: #123456; |
bg-[#123456] |
grid-template-columns: 180px 1fr; |
grid-cols-[180px_1fr] |
box-shadow: 0 20px 40px -15px #0006; |
shadow-[0_20px_40px_-15px_#0006] |
Do not overuse arbitrary values
If the same custom value appears repeatedly, promote it into a reusable theme token or custom utility rather than copying the bracket syntax everywhere.
A Faster CSS-to-Tailwind Workflow
Inspect the live component
Use CSSPeek to read the computed layout, spacing, color, typography and selector values applied to the element.
Map standard values first
Convert display, spacing, sizing, borders and typography using standard utilities before reaching for custom values.
Add responsive and state variants
Convert media queries, hover rules, focus styles, disabled states and dark-mode rules after the base component is correct.
Decode and verify
Paste the final classes into the Tailwind Class Decoder to review the combined CSS and identify unsupported or custom utilities.
When starting from an existing website, CSSPeek’s selector and class inspector can separate long utility-first class strings into a more readable list.
What a Tailwind Class Converter May Miss
Complex selectors
Descendant selectors, attribute combinations and deeply nested rules may need variants or custom CSS.
Custom animations
Unique keyframes and animation sequences rarely map to a single built-in utility.
Dynamic class names
Avoid constructing partial class strings such as bg-${color}-600. Keep complete class names visible in the source.
Project-specific tokens
A generic converter cannot know which custom color, spacing or radius token your design system prefers.
Use the one-click CSS inspection workflow to capture the exact original values before deciding which ones should become Tailwind utilities.
Free Tailwind Tool
Not sure what a Tailwind class does?
Paste the complete utility string and get a category-grouped breakdown, resolved CSS and plain-English explanation.
Open Tailwind Class DecoderFrequently Asked Questions
What is a Tailwind class converter?
A Tailwind class converter maps standard CSS properties to Tailwind utility classes or resolves an existing Tailwind class string back into CSS.
Can every CSS property be converted to Tailwind?
Many common properties map directly. Unusual values can use arbitrary utilities, while complex selectors, animations and project-specific rules may still need custom CSS.
How do I convert hover CSS to Tailwind?
Place the hover: prefix before the utility. For example, background-color: #1d4ed8 inside :hover can become hover:bg-blue-700.
How do I convert media queries to Tailwind?
Use a responsive prefix before the utility. For example, a rule beginning at 768px commonly maps to the default md: variant.
Can Tailwind convert back to regular CSS?
Yes. A decoder can resolve supported utility classes into their underlying CSS declarations. Responsive and state-prefixed utilities still need their media-query or pseudo-class context.
Should I use arbitrary values or custom CSS?
Use an arbitrary value for an intentional one-off value. Create a reusable theme token or custom utility when the same value appears throughout the project.
Does CSSPeek support Tailwind v4?
The CSSPeek Tailwind Class Decoder targets common Tailwind v4 conventions and also decodes most unchanged v3 utility names.
Sources and Research Notes
- Tailwind CSS utility-class concepts.
- Tailwind hover, focus and state variants.
- Tailwind responsive-design documentation.
- Tailwind source-class detection guidance.
- Tailwind box-shadow utilities.
- Competitor research included TailConverter and single-purpose CSS-to-Tailwind conversion tools. Component code was independently prepared and checked against current Tailwind syntax.