Extended, grouped reference for Tailwind CSS v4 utility classes — compiled from the official docs so it actually reflects v4, not v3. Need something you can keep on your desk? Try the condensed version.
Last updated: September 4, 2026
The most common source of outdated cheatsheets: these utilities were renamed or changed behavior in v4.
| v3 | v4 | Note |
|---|---|---|
| shadow-sm | shadow-xs | |
| shadow | shadow-sm | |
| drop-shadow-sm | drop-shadow-xs | |
| drop-shadow | drop-shadow-sm | |
| blur-sm | blur-xs | |
| blur | blur-sm | |
| backdrop-blur-sm | backdrop-blur-xs | |
| backdrop-blur | backdrop-blur-sm | |
| rounded-sm | rounded-xs | |
| rounded | rounded-sm | |
| outline-none | outline-hidden | |
| ring | ring-3 | default ring width is now 1px, not 3px |
| flex-shrink-* | shrink-* | |
| flex-grow-* | grow-* | |
| overflow-ellipsis | text-ellipsis | |
| decoration-slice | box-decoration-slice | |
| decoration-clone | box-decoration-clone | |
| bg-opacity-* | bg-black/50 | opacity modifiers replace all *-opacity-* utilities |
| text-opacity-* | text-black/50 | |
| border-opacity-* | border-black/50 | |
| ring-opacity-* | ring-black/50 | |
| !flex | flex! | important modifier moved to the end of the class |
| bg-[--brand] | bg-(--brand) | arbitrary CSS variable syntax |
| grid-cols-[max-content,auto] | grid-cols-[max-content_auto] | commas in arbitrary values become underscores |
imatlas.dev — made with <3