From 96abb41fcd51f51fbf659981cdaf42c5625893ed Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Thu, 25 Jul 2024 09:45:02 -0400
Subject: [PATCH 1/2] Reduce specificity of * variant

Reduce the specificity of the * variant so that classes directly on the child elements take precedence over the styles applied by the parent.
---
 packages/tailwindcss/src/variants.test.ts | 2 +-
 packages/tailwindcss/src/variants.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index d27da76387c3..895d444e4562 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -14,7 +14,7 @@ test('force', () => {
 
 test('*', () => {
   expect(run(['*:flex'])).toMatchInlineSnapshot(`
-    ".\\*\\:flex > * {
+    ":where(.\\*\\:flex > *) {
       display: flex;
     }"
   `)
diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
index 8a08bb787035..4a05b9adc784 100644
--- a/packages/tailwindcss/src/variants.ts
+++ b/packages/tailwindcss/src/variants.ts
@@ -201,7 +201,7 @@ export function createVariants(theme: Theme): Variants {
   }
 
   variants.static('force', () => {}, { compounds: false })
-  staticVariant('*', ['& > *'], { compounds: false })
+  staticVariant('*', [':where(& > *)'], { compounds: false })
 
   variants.compound('not', (ruleNode, variant) => {
     if (variant.modifier) return null

From 47a661974579177ad72a0f03b6a10be49a478923 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Thu, 25 Jul 2024 09:51:55 -0400
Subject: [PATCH 2/2] Update CHANGELOG.md

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7df0bf62e748..95242248e00e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `@variant` at-rule for defining custom variants in CSS ([#13992](https://github.com/tailwindlabs/tailwindcss/pull/13992), [#14008](https://github.com/tailwindlabs/tailwindcss/pull/14008))
 - Add `@utility` at-rule for defining custom utilities in CSS ([#14044](https://github.com/tailwindlabs/tailwindcss/pull/14044))
 
+### Changed
+
+- Reduce the specificity of the `*` variant so those styles can be overridden by child elements ([#14056](https://github.com/tailwindlabs/tailwindcss/pull/14056))
+
 ## [4.0.0-alpha.17] - 2024-07-04
 
 ### Added