diff --git a/CHANGELOG.md b/CHANGELOG.md index d1fce67b58f2..98f30116b865 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Target `:open` in existing `open` variant ([#15349](https://github.com/tailwindlabs/tailwindcss/pull/15349)) +- Target `::details-content` in new `details-content` variant ([#15319](https://github.com/tailwindlabs/tailwindcss/pull/15319)) ### Fixed diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 203e52712f55..7e666a1e8392 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -7747,6 +7747,13 @@ exports[`getVariants 1`] = ` "selectors": [Function], "values": [], }, + { + "hasDash": true, + "isArbitrary": false, + "name": "details-content", + "selectors": [Function], + "values": [], + }, { "hasDash": true, "isArbitrary": false, diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index cc600b9cedaf..7aa7f1396853 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -104,6 +104,15 @@ test('backdrop', async () => { expect(await run(['backdrop/foo:flex'])).toEqual('') }) +test('details-content', async () => { + expect(await run(['details-content:flex'])).toMatchInlineSnapshot(` + ".details-content\\:flex::details-content { + display: flex; + }" + `) + expect(await run(['details-content/foo:flex'])).toEqual('') +}) + test('before', async () => { expect(await run(['before:flex'])).toMatchInlineSnapshot(` ".before\\:flex:before { @@ -2115,6 +2124,7 @@ test('variant order', async () => { 'data-custom:flex', 'data-[custom=true]:flex', 'default:flex', + 'details-content:flex', 'disabled:flex', 'empty:flex', 'enabled:flex', @@ -2209,6 +2219,10 @@ test('variant order', async () => { display: flex; } + .details-content\\:flex::details-content { + display: flex; + } + .before\\:flex:before, .after\\:flex:after { content: var(--tw-content); display: flex; diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 8ccacce3af63..69bee29f9b28 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -628,6 +628,7 @@ export function createVariants(theme: Theme): Variants { staticVariant('file', ['&::file-selector-button']) staticVariant('placeholder', ['&::placeholder']) staticVariant('backdrop', ['&::backdrop']) + staticVariant('details-content', ['&::details-content']) { function contentProperties() {