Ensure .group and .peer are prefixed when using the prefix(…) option (#15174)

This PR fixes an issue where the `.group` and `.peer` classes didn't get
prefixed if you are using the `prefix(…)` option.

Before this change, `tw:group-hover:flex`, generated:
```css
.tw\\:group-hover\\:flex {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      display: flex;
    }
  }
}
```

But now it generates:
```css
.tw\\:group-hover\\:flex {
  &:is(:where(.tw\\:group):hover *) {
    @media (hover: hover) {
      display: flex;
    }
  }
}
```

Or as a diff, it might be more clear:
```diff
  .tw\\:group-hover\\:flex {
-   &:is(:where(.group):hover *) {
+   &:is(:where(.tw\\:group):hover *) {
      @media (hover: hover) {
        display: flex;
      }
    }
  }
```

Fixes: #15172

Author: RobinMalfait

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure `.group` and `.peer` are prefixed when using the `prefix(…)` option ([#15174](https://github.com/tailwindlabs/tailwindcss/pull/15174))
 
 ## [4.0.0-beta.2] - 2024-11-22
 

packages/tailwindcss/src/prefix.test.ts

@@ -17,14 +17,35 @@ test('utilities must be prefixed', async () => {
   let compiler = await compile(input)
 
   // Prefixed utilities are generated
-  expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom']))
-    .toMatchInlineSnapshot(`
+  expect(
+    compiler.build([
+      'tw:underline',
+      'tw:hover:line-through',
+      'tw:custom',
+      'tw:group-hover:flex',
+      'tw:peer-hover:flex',
+    ]),
+  ).toMatchInlineSnapshot(`
     ".tw\\:custom {
       color: red;
     }
     .tw\\:underline {
       text-decoration-line: underline;
     }
+    .tw\\:group-hover\\:flex {
+      &:is(:where(.tw\\:group):hover *) {
+        @media (hover: hover) {
+          display: flex;
+        }
+      }
+    }
+    .tw\\:peer-hover\\:flex {
+      &:is(:where(.tw\\:peer):hover ~ *) {
+        @media (hover: hover) {
+          display: flex;
+        }
+      }
+    }
     .tw\\:hover\\:line-through {
       &:hover {
         @media (hover: hover) {

packages/tailwindcss/src/variants.ts

@@ -518,8 +518,8 @@ export function createVariants(theme: Theme): Variants {
     // Name the group by appending the modifier to `group` class itself if
     // present.
     let variantSelector = variant.modifier
-      ? `:where(.group\\/${variant.modifier.value})`
-      : ':where(.group)'
+      ? `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}group\\/${variant.modifier.value})`
+      : `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}group)`
 
     let didApply = false
 
@@ -570,8 +570,8 @@ export function createVariants(theme: Theme): Variants {
     // Name the peer by appending the modifier to `peer` class itself if
     // present.
     let variantSelector = variant.modifier
-      ? `:where(.peer\\/${variant.modifier.value})`
-      : ':where(.peer)'
+      ? `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}peer\\/${variant.modifier.value})`
+      : `:where(.${theme.prefix ? `${theme.prefix}\\:` : ''}peer)`
 
     let didApply = false