Improve style invalidation performance of group-* and peer-* variants

CHANGELOG.md

@@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don't generate CSS for candidates containing an empty additional modifier (e.g. `bg-red-500/50/` and `group-hover/foo//bar:flex`) ([#20466](https://github.com/tailwindlabs/tailwindcss/pull/20466))
 - Sort `min-*`, `max-*`, and container query variants with decimal values numerically (e.g. `min-[40.25rem]` before `min-[40.5rem]`) ([#20512](https://github.com/tailwindlabs/tailwindcss/pull/20512))
 - Ensure CSS comments ending with `\*/` are closed correctly instead of swallowing the CSS that follows (e.g. `/* C:\temp\*/`) ([#20508](https://github.com/tailwindlabs/tailwindcss/pull/20508))
+- Improve style invalidation performance of `group-*` and `peer-*` variants ([#20513](https://github.com/tailwindlabs/tailwindcss/pull/20513))
 
 ## [4.3.3] - 2026-07-16
 

packages/tailwindcss/src/compat/plugin-api.test.ts

@@ -1630,7 +1630,7 @@ describe('addVariant', () => {
     ).toMatchInlineSnapshot(`
       "
       @layer utilities {
-        .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) {
+        :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -1744,7 +1744,7 @@ describe('addVariant', () => {
     ).toMatchInlineSnapshot(`
       "
       @layer utilities {
-        .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) {
+        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -1784,7 +1784,7 @@ describe('addVariant', () => {
     ).toMatchInlineSnapshot(`
       "
       @layer utilities {
-        .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) {
+        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -1827,12 +1827,12 @@ describe('addVariant', () => {
       "
       @layer utilities {
         @media (hover: hover) {
-          .group-hocus\\:flex:is(:where(.group):hover *) {
+          :is(:where(.group):hover .group-hocus\\:flex) {
             display: flex;
           }
         }
 
-        .group-hocus\\:flex:is(:where(.group):focus *) {
+        :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -1964,7 +1964,7 @@ describe('addVariant', () => {
     ).toMatchInlineSnapshot(`
       "
       @layer utilities {
-        .group-optional\\:flex:is(:where(.group):optional *), .group-optional\\/foo\\:flex:is(:where(.group\\/foo):optional *), .peer-optional\\:flex:is(:where(.peer):optional ~ *), .optional\\:flex:optional {
+        :is(:where(.group):optional .group-optional\\:flex), :is(:where(.group\\/foo):optional .group-optional\\/foo\\:flex), :is(:where(.peer):optional ~ .peer-optional\\:flex), .optional\\:flex:optional {
           display: flex;
         }
       }
@@ -2903,7 +2903,7 @@ describe('matchVariant', () => {
     ).toMatchInlineSnapshot(`
       "
       @layer utilities {
-        .group-optional-\\[test\\]\\:flex:is(:where(.group):optional:has(test) :where(.group) *), .group-optional-\\[test\\]\\/foo\\:flex:is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) *), .peer-optional-\\[test\\]\\:flex:is(:where(.peer):optional:has(test) :where(.peer) ~ *), .optional-\\[test\\]\\:flex:optional:has(test) .optional-\\[test\\]\\:flex {
+        :is(:where(.group):optional:has(test) :where(.group) .group-optional-\\[test\\]\\:flex), :is(:where(.group\\/foo):optional:has(test) :where(.group\\/foo) .group-optional-\\[test\\]\\/foo\\:flex), :is(:where(.peer):optional:has(test) :where(.peer) ~ .peer-optional-\\[test\\]\\:flex), .optional-\\[test\\]\\:flex:optional:has(test) .optional-\\[test\\]\\:flex {
           display: flex;
         }
       }

packages/tailwindcss/src/index.test.ts

@@ -1444,42 +1444,42 @@ describe('sorting', () => {
     ).toMatchInlineSnapshot(`
       "
       @media (hover: hover) {
-        .group-hover\\:flex:is(:where(.group):hover *) {
+        :is(:where(.group):hover .group-hover\\:flex) {
           display: flex;
         }
       }
 
-      .group-focus\\:flex:is(:where(.group):focus *) {
+      :is(:where(.group):focus .group-focus\\:flex) {
         display: flex;
       }
 
       @media (hover: hover) {
-        .peer-hover\\:flex:is(:where(.peer):hover ~ *) {
+        :is(:where(.peer):hover ~ .peer-hover\\:flex) {
           display: flex;
         }
 
         @media (hover: hover) {
-          .group-hover\\:peer-hover\\:flex:is(:where(.group):hover *):is(:where(.peer):hover ~ *), .peer-hover\\:group-hover\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):hover *) {
+          :is(:where(.peer):hover ~ :is(:where(.group):hover .group-hover\\:peer-hover\\:flex)), :is(:where(.group):hover :is(:where(.peer):hover ~ .peer-hover\\:group-hover\\:flex)) {
             display: flex;
           }
         }
 
-        .group-focus\\:peer-hover\\:flex:is(:where(.group):focus *):is(:where(.peer):hover ~ *), .peer-hover\\:group-focus\\:flex:is(:where(.peer):hover ~ *):is(:where(.group):focus *) {
+        :is(:where(.peer):hover ~ :is(:where(.group):focus .group-focus\\:peer-hover\\:flex)), :is(:where(.group):focus :is(:where(.peer):hover ~ .peer-hover\\:group-focus\\:flex)) {
           display: flex;
         }
       }
 
-      .peer-focus\\:flex:is(:where(.peer):focus ~ *) {
+      :is(:where(.peer):focus ~ .peer-focus\\:flex) {
         display: flex;
       }
 
       @media (hover: hover) {
-        .group-hover\\:peer-focus\\:flex:is(:where(.group):hover *):is(:where(.peer):focus ~ *), .peer-focus\\:group-hover\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):hover *) {
+        :is(:where(.peer):focus ~ :is(:where(.group):hover .group-hover\\:peer-focus\\:flex)), :is(:where(.group):hover :is(:where(.peer):focus ~ .peer-focus\\:group-hover\\:flex)) {
           display: flex;
         }
       }
 
-      .group-focus\\:peer-focus\\:flex:is(:where(.group):focus *):is(:where(.peer):focus ~ *), .peer-focus\\:group-focus\\:flex:is(:where(.peer):focus ~ *):is(:where(.group):focus *) {
+      :is(:where(.peer):focus ~ :is(:where(.group):focus .group-focus\\:peer-focus\\:flex)), :is(:where(.group):focus :is(:where(.peer):focus ~ .peer-focus\\:group-focus\\:flex)) {
         display: flex;
       }
 
@@ -3601,7 +3601,7 @@ describe('plugins', () => {
     ).toMatchInlineSnapshot(`
       "
       @layer utilities {
-        .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) {
+        :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -3636,7 +3636,7 @@ describe('plugins', () => {
     ).toMatchInlineSnapshot(`
       "
       @layer utilities {
-        .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) {
+        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -3674,7 +3674,7 @@ describe('plugins', () => {
     ).toMatchInlineSnapshot(`
       "
       @layer utilities {
-        .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) {
+        :is(:where(.group):hover .group-hocus\\:flex), :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -3715,12 +3715,12 @@ describe('plugins', () => {
       "
       @layer utilities {
         @media (hover: hover) {
-          .group-hocus\\:flex:is(:where(.group):hover *) {
+          :is(:where(.group):hover .group-hocus\\:flex) {
             display: flex;
           }
         }
 
-        .group-hocus\\:flex:is(:where(.group):focus *) {
+        :is(:where(.group):focus .group-hocus\\:flex) {
           display: flex;
         }
 
@@ -4199,7 +4199,7 @@ describe('@custom-variant', () => {
       ).toMatchInlineSnapshot(`
         "
         @layer utilities {
-          .group-hocus\\:flex:is(:is(:where(.group):hover, :where(.group):focus) *) {
+          :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:flex) {
             display: flex;
           }
 
@@ -4294,7 +4294,7 @@ describe('@custom-variant', () => {
       ).toMatchInlineSnapshot(`
         "
         @layer utilities {
-          .group-selected\\:underline:is(:where(.group)[data-selected] *), .selected\\:underline[data-selected] {
+          :is(:where(.group)[data-selected] .group-selected\\:underline), .selected\\:underline[data-selected] {
             text-decoration-line: underline;
           }
         }
@@ -4322,7 +4322,7 @@ describe('@custom-variant', () => {
       ).toMatchInlineSnapshot(`
         "
         @layer utilities {
-          .group-hocus\\:underline:is(:is(:where(.group):hover, :where(.group):focus) *), .hocus\\:underline:hover, .hocus\\:underline:focus {
+          :is(:is(:where(.group):hover, :where(.group):focus) .group-hocus\\:underline), .hocus\\:underline:hover, .hocus\\:underline:focus {
             text-decoration-line: underline;
           }
         }
@@ -4353,7 +4353,7 @@ describe('@custom-variant', () => {
       ).toMatchInlineSnapshot(`
         "
         @layer utilities {
-          .group-hocus\\:underline:is(:where(.group):hover *), .group-hocus\\:underline:is(:where(.group):focus *), .hocus\\:underline:hover, .hocus\\:underline:focus {
+          :is(:where(.group):hover .group-hocus\\:underline), :is(:where(.group):focus .group-hocus\\:underline), .hocus\\:underline:hover, .hocus\\:underline:focus {
             text-decoration-line: underline;
           }
         }
@@ -4458,12 +4458,12 @@ describe('@custom-variant', () => {
         "
         @layer utilities {
           @media (hover: hover) {
-            .group-hocus\\:underline:is(:where(.group):hover *) {
+            :is(:where(.group):hover .group-hocus\\:underline) {
               text-decoration-line: underline;
             }
           }
 
-          .group-hocus\\:underline:is(:where(.group):focus *) {
+          :is(:where(.group):focus .group-hocus\\:underline) {
             text-decoration-line: underline;
           }
 
@@ -4503,7 +4503,7 @@ describe('@custom-variant', () => {
         "
         @layer utilities {
           @media (hover: hover) {
-            .group-hocus\\:underline:is(:where(.group):hover *), .hocus\\:underline:hover {
+            :is(:where(.group):hover .group-hocus\\:underline), .hocus\\:underline:hover {
               text-decoration-line: underline;
             }
           }

packages/tailwindcss/src/intellisense.test.ts

@@ -97,9 +97,9 @@ test('getVariants compound', async () => {
   ]
 
   expect(list).toEqual([
-    ['@media (hover: hover) { &:is(:where(.group):hover *) }'],
-    ['@media (hover: hover) { &:is(:where(.group\\/sidebar):hover *) }'],
-    ['@media (hover: hover) { &:is(:where(.group):is(:where(.group):hover *) *) }'],
+    ['@media (hover: hover) { :is(:where(.group):hover &) }'],
+    ['@media (hover: hover) { :is(:where(.group\\/sidebar):hover &) }'],
+    ['@media (hover: hover) { :is(:is(:where(.group):hover :where(.group)) &) }'],
     [],
     [],
   ])

packages/tailwindcss/src/prefix.test.ts

@@ -38,7 +38,7 @@ test('utilities must be prefixed', async () => {
     }
 
     @media (hover: hover) {
-      .tw\\:group-hover\\:flex:is(:where(.tw\\:group):hover *), .tw\\:peer-hover\\:flex:is(:where(.tw\\:peer):hover ~ *) {
+      :is(:where(.tw\\:group):hover .tw\\:group-hover\\:flex), :is(:where(.tw\\:peer):hover ~ .tw\\:peer-hover\\:flex) {
         display: flex;
       }