Search any Tailwind utility and see the exact CSS it generates, with live previews for shadows, radius, type and filters. Type a full class such as md:hover:bg-blue-500/50 or -mt-4 to decode it, and copy colors from the complete palette.
Last updated:
Try:
Generated CSS for
Values from the Tailwind CSS v3.4 default theme ( classes). Click a class to copy it. Utilities renamed in v4 are marked.
No classes match. Try a CSS property (margin, color, grid) or a class prefix (p-, text-, rounded).
Advertisement
Advertisement
How to use the Tailwind CSS Cheat Sheet
Search by class name or CSS property, for example justify-between, padding, shadow or grid-cols.
Decode a class by typing it exactly, including variants (md:hover:), a minus for negatives, opacity (/50) or arbitrary values (w-[37px]).
Browse by category with the tabs, and press Show all to expand long scales such as spacing.
Copy a class by clicking it, or press Copy CSS to take the plain CSS.
Pick colors in the Colors tab: choose a utility prefix or a format such as HEX or OKLCH and click a swatch.
Tailwind spacing scale in rem and pixels
Spacing utilities (padding, margin, gap, width, height, inset, translate) share one scale. One step is 0.25rem, which equals 4px when the root font size is 16px.
Class suffix
rem
px
Class suffix
rem
px
0
0
0
8
2rem
32px
px
—
1px
10
2.5rem
40px
0.5
0.125rem
2px
12
3rem
48px
1
0.25rem
4px
16
4rem
64px
2
0.5rem
8px
20
5rem
80px
3
0.75rem
12px
24
6rem
96px
4
1rem
16px
32
8rem
128px
5
1.25rem
20px
48
12rem
192px
6
1.5rem
24px
64
16rem
256px
7
1.75rem
28px
96
24rem
384px
Responsive breakpoints
Prefix
Min width
CSS
sm:
640px
@media (min-width: 640px)
md:
768px
@media (min-width: 768px)
lg:
1024px
@media (min-width: 1024px)
xl:
1280px
@media (min-width: 1280px)
2xl:
1536px
@media (min-width: 1536px)
Breakpoints are mobile first: style the small screen without a prefix, then override upward, for example flex-col md:flex-row. Use max-md: to target only screens narrower than 768px.
Renamed utilities in Tailwind CSS v4
v3
v4
shadow-sm / shadow
shadow-xs / shadow-sm
rounded-sm / rounded
rounded-xs / rounded-sm
blur-sm / blur
blur-xs / blur-sm
drop-shadow-sm / drop-shadow
drop-shadow-xs / drop-shadow-sm
outline-none
outline-hidden (outline-none now sets outline-style: none)
ring (3px)
ring-3; plain ring is 1px
bg-gradient-to-r
bg-linear-to-r
flex-grow / flex-shrink
grow / shrink
bg-opacity-50
bg-black/50 (opacity modifier)
In v4 the default border color also changed from gray-200 to currentColor, and theme values are defined in CSS with @theme instead of tailwind.config.js.
Frequently asked questions
What is the Tailwind spacing scale?
In the default theme one unit is 0.25rem, which is 4px at the default 16px font size. So p-1 is 4px, p-4 is 1rem (16px), p-8 is 2rem (32px) and p-px is exactly 1px. The scale runs from 0 to 96 (24rem, 384px) with half steps such as 0.5, 1.5, 2.5 and 3.5.
What are Tailwind's default breakpoints?
sm is 640px, md 768px, lg 1024px, xl 1280px and 2xl 1536px. They are min-width media queries, so Tailwind is mobile first: an unprefixed class applies at every size and md:flex applies from 768px wide and up.
How do I use a value that is not in the Tailwind scale?
Use square brackets for an arbitrary value, such as w-[37px], top-[117px], bg-[#1da1f2] or grid-cols-[200px_1fr] (underscores become spaces). For a property Tailwind has no utility for, write [mask-type:luminance].
What changed in Tailwind CSS v4?
Version 4 moves configuration into CSS with @theme, uses OKLCH colors and computes spacing from a single --spacing variable. Several utilities were renamed: shadow-sm became shadow-xs and shadow became shadow-sm, the same shift applies to rounded, blur and drop-shadow, outline-none became outline-hidden, and the default ring width changed from 3px to 1px (use ring-3).
How do I make a negative margin in Tailwind?
Put a minus sign in front of the class: -mt-4 gives margin-top: -1rem and -translate-x-1/2 gives translateX(-50%). Negative values work for margin, inset (top, left…), translate, rotate, skew, z-index, order, text-indent and space-between.
How does the opacity modifier work on colors?
Add a slash and a number from 0 to 100 to any color utility: bg-black/50 is black at 50% opacity and text-blue-500/75 is 75%. It replaces the older bg-opacity-* utilities, which were removed in v4.
Are these values for Tailwind v3 or v4?
Class names and CSS follow the default theme of Tailwind CSS v3.4, which most projects and tutorials still use. Utilities renamed in v4 are marked, and the color palette can be copied in the v4 OKLCH format. Your project may also extend or change the theme in its configuration.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.