diff --git a/CHANGELOG.md b/CHANGELOG.md index e0887e203e63..a345e26cd821 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -56,6 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Rename `--transition-timing-function-*` variables to `--ease-*` ([#14886](https://github.com/tailwindlabs/tailwindcss/pull/14886)) - Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898)) - Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909)) +- Revert specificity of `*` variant to match v3 behavior ([#14920](https://github.com/tailwindlabs/tailwindcss/pull/14920)) ## [4.0.0-alpha.31] - 2024-10-29 diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index fc0c9856f546..54cbe2dbf5d0 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -17,7 +17,7 @@ test('force', async () => { test('*', async () => { expect(await run(['*:flex'])).toMatchInlineSnapshot(` - ":where(.\\*\\:flex > *) { + ":is(.\\*\\:flex > *) { display: flex; }" `) @@ -26,7 +26,7 @@ test('*', async () => { test('**', async () => { expect(await run(['**:flex'])).toMatchInlineSnapshot(` - ":where(.\\*\\*\\:flex *) { + ":is(.\\*\\*\\:flex *) { display: flex; }" `) diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 81be83326141..7174323eb92a 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -363,8 +363,8 @@ export function createVariants(theme: Theme): Variants { } variants.static('force', () => {}, { compounds: Compounds.Never }) - staticVariant('*', [':where(& > *)'], { compounds: Compounds.Never }) - staticVariant('**', [':where(& *)'], { compounds: Compounds.Never }) + staticVariant('*', [':is(& > *)'], { compounds: Compounds.Never }) + staticVariant('**', [':is(& *)'], { compounds: Compounds.Never }) function negateConditions(ruleName: string, conditions: string[]) { return conditions.map((condition) => {