tailwindcss upgrade
v0.1, v1, v2, v3 to v4
2025-04-09
Written by: tdtc
myprefix:text-red-500
myprefix:hover:text-red-500
myprefix-text-red-500
hover:myprefix-text-red-500
utilities
| v3 | v4 |
|---|
| 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 |
| old | new |
|---|
| overflow-clip | text-clip |
| overflow-ellipsis | text-ellipsis |
| flex-grow-0 | grow-0 |
| flex-shrink | shrink |
grow-*
flex-grow-*
flex-nowrap
flex-no-wrap
shrink-0
flex-shrink-0
flex-no-shrink
whitespace
whitespace-nowrap
whitespace-no-wrap
rounded-sm
rounded
list none
list-none
list-reset
line height
leading-[1.5]
leading-normal line-height: 1.5;
leading tight
leading-[1.25]
leading-tight
//https://getbootstrap.com/docs/4.6/utilities/embed/
'embed-responsive' => 'relative block w-full p-0 overflow-hidden',
'embed-responsive-item' => 'absolute top-0 bottom-0 left-0 w-full h-full border-0',
'embed-responsive-21by9' => 'aspect-21/9',
'embed-responsive-16by9' => 'aspect-16/9',
'embed-responsive-4by3' => 'aspect-4/3',
'embed-responsive-1by1' => 'aspect-square',
v2 and v3
position
- absolute
- relative
- fixed
- static
sticky
position: sticky;
none
we’ve removed these two utilities from v2.0.
- scrolling-touch
- scrolling-auto
Class name changes - v2
Update renamed utility classes :
| old | new |
|---|
| whitespace-no-wrap | whitespace-nowrap |
| flex-no-wrap | flex-nowrap |
| col-gap-{n} | gap-x-{n} |
| row-gap-{n} | gap-y-{n} |
| old | new |
|---|
| focus:shadow-outline | focus:ring |
| shadow-xs | ring-1 ring-black ring-opacity-5 |
| Font weight | old | new |
|---|
| 100 | font-hairline | font-thin |
| 200 | font-thin | font-extralight |
text
initialism
font-size: 90%;
text-transform: uppercase;
text-xs
uppercase
Ref