You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As documented in the upgrade guide, Tailwind CSS 4 changes the space between utilities (e.g. space-y-4) to use :where(& > :not(:last-child)) and apply margins to the bottom of every sibling but the last rather than applying a margin top to every sibling than the first in Tailwind CSS 3.
The rationale given for the selector change from 3 is for performance but this change causes regressions for my projects due to the change in margin collapsing (with margins now added to the bottom rather than the top) and due to margins now being applied to inline elements (if they are the first child).
Is there a reason why the selector couldn’t be optimised but still use margin top, e.g.
:where(&>:not(:first-child)) {
margin-top:1rem;
}
(Where the real code uses margin-inline-start, etc.).
Or is the performance gain only realised when using :not(:last-child)?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
As documented in the upgrade guide, Tailwind CSS 4 changes the space between utilities (e.g.
space-y-4
) to use:where(& > :not(:last-child))
and apply margins to the bottom of every sibling but the last rather than applying a margin top to every sibling than the first in Tailwind CSS 3.The rationale given for the selector change from 3 is for performance but this change causes regressions for my projects due to the change in margin collapsing (with margins now added to the bottom rather than the top) and due to margins now being applied to inline elements (if they are the first child).
Is there a reason why the selector couldn’t be optimised but still use margin top, e.g.
(Where the real code uses margin-inline-start, etc.).
Or is the performance gain only realised when using
:not(:last-child)
?Beta Was this translation helpful? Give feedback.
All reactions