Reset reverse state in space-x/y-* and divide-x/y-* (#15094)

We weren't resetting the `--tw-space-x-reverse` and
`--tw-space-y-reverse` state in the `space-x/y-{number}` utilities which
broke code assuming that `md:space-x-3` would no longer be reversed.
This PR fixes that.

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Use configured `--letter-spacing` values for custom font size utilities ([#15099](https://github.com/tailwindlabs/tailwindcss/pull/15099))
+- Ensure `space-x/y-*` and `divide-x/y-*` with variants can undo `space-x/y-reverse` and `divide-x/y-reverse` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094))
 
 ## [4.0.0-beta.1] - 2024-11-21
 

packages/tailwindcss/src/index.test.ts

@@ -686,6 +686,7 @@ describe('sorting', () => {
       }
 
       :where(.space-x-2 > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
         margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse));
         margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse)));
       }

packages/tailwindcss/src/utilities.test.ts

@@ -7866,16 +7866,19 @@ test('space-x', async () => {
     }
 
     :where(.-space-x-4 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
       margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse));
       margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse)));
     }
 
     :where(.space-x-4 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
       margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse));
       margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse)));
     }
 
     :where(.space-x-\\[4px\\] > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
       margin-inline-start: calc(4px * var(--tw-space-x-reverse));
       margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse)));
     }
@@ -7914,16 +7917,19 @@ test('space-y', async () => {
     }
 
     :where(.-space-y-4 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
       margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse));
       margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse)));
     }
 
     :where(.space-y-4 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
       margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
       margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
     }
 
     :where(.space-y-\\[4px\\] > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
       margin-block-start: calc(4px * var(--tw-space-y-reverse));
       margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse)));
     }
@@ -8001,24 +8007,28 @@ test('divide-x', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ":where(.divide-x > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
       border-inline-style: var(--tw-border-style);
       border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
       border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
     }
 
     :where(.divide-x-4 > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
       border-inline-style: var(--tw-border-style);
       border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
       border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
     }
 
     :where(.divide-x-123 > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
       border-inline-style: var(--tw-border-style);
       border-inline-start-width: calc(123px * var(--tw-divide-x-reverse));
       border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse)));
     }
 
     :where(.divide-x-\\[4px\\] > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
       border-inline-style: var(--tw-border-style);
       border-inline-start-width: calc(4px * var(--tw-divide-x-reverse));
       border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
@@ -8077,6 +8087,7 @@ test('divide-x with custom default border width', async () => {
     }
 
     :where(.divide-x > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
       border-inline-style: var(--tw-border-style);
       border-inline-start-width: calc(2px * var(--tw-divide-x-reverse));
       border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
@@ -8116,27 +8127,31 @@ test('divide-y', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ":where(.divide-y > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
       border-bottom-style: var(--tw-border-style);
       border-top-style: var(--tw-border-style);
       border-top-width: calc(1px * var(--tw-divide-y-reverse));
       border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
 
     :where(.divide-y-4 > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
       border-bottom-style: var(--tw-border-style);
       border-top-style: var(--tw-border-style);
       border-top-width: calc(4px * var(--tw-divide-y-reverse));
       border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
     }
 
     :where(.divide-y-123 > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
       border-bottom-style: var(--tw-border-style);
       border-top-style: var(--tw-border-style);
       border-top-width: calc(123px * var(--tw-divide-y-reverse));
       border-bottom-width: calc(123px * calc(1 - var(--tw-divide-y-reverse)));
     }
 
     :where(.divide-y-\\[4px\\] > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
       border-bottom-style: var(--tw-border-style);
       border-top-style: var(--tw-border-style);
       border-top-width: calc(4px * var(--tw-divide-y-reverse));
@@ -8196,6 +8211,7 @@ test('divide-y with custom default border width', async () => {
     }
 
     :where(.divide-y > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
       border-bottom-style: var(--tw-border-style);
       border-top-style: var(--tw-border-style);
       border-top-width: calc(2px * var(--tw-divide-y-reverse));

packages/tailwindcss/src/utilities.ts

@@ -1828,6 +1828,7 @@ export function createUtilities(theme: Theme) {
 
       styleRule(':where(& > :not(:last-child))', [
         decl('--tw-sort', 'row-gap'),
+        decl('--tw-space-x-reverse', '0'),
         decl('margin-inline-start', `calc(${value} * var(--tw-space-x-reverse))`),
         decl('margin-inline-end', `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`),
       ]),
@@ -1842,6 +1843,7 @@ export function createUtilities(theme: Theme) {
       atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
       styleRule(':where(& > :not(:last-child))', [
         decl('--tw-sort', 'column-gap'),
+        decl('--tw-space-y-reverse', '0'),
         decl('margin-block-start', `calc(${value} * var(--tw-space-y-reverse))`),
         decl('margin-block-end', `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`),
       ]),
@@ -2190,6 +2192,7 @@ export function createUtilities(theme: Theme) {
         styleRule(':where(& > :not(:last-child))', [
           decl('--tw-sort', 'divide-x-width'),
           borderProperties(),
+          decl('--tw-divide-x-reverse', '0'),
           decl('border-inline-style', 'var(--tw-border-style)'),
           decl('border-inline-start-width', `calc(${value} * var(--tw-divide-x-reverse))`),
           decl('border-inline-end-width', `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`),
@@ -2210,6 +2213,7 @@ export function createUtilities(theme: Theme) {
         styleRule(':where(& > :not(:last-child))', [
           decl('--tw-sort', 'divide-y-width'),
           borderProperties(),
+          decl('--tw-divide-y-reverse', '0'),
           decl('border-bottom-style', 'var(--tw-border-style)'),
           decl('border-top-style', 'var(--tw-border-style)'),
           decl('border-top-width', `calc(${value} * var(--tw-divide-y-reverse))`),