Add ::-webkit-details-marker pseudo to marker variant (#17362)

See #17360

This PR updates the `marker` variant to also target the marker present
in `<summary>` elements in WebKit browsers. Chromium uses `::marker` and
is therefore already covered.

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Add `@source inline(…)` ([#17147](https://github.com/tailwindlabs/tailwindcss/pull/17147))
 - Add support for literal values in `--value('…')` and `--modifier('…')` ([#17304](https://github.com/tailwindlabs/tailwindcss/pull/17304))
 - Add suggestions when `--spacing(--value(integer, number))` is used ([#17308](https://github.com/tailwindlabs/tailwindcss/pull/17308))
+- Add `::-webkit-details-marker` pseudo to `marker` variant ([#17362](https://github.com/tailwindlabs/tailwindcss/pull/17362))
 
 ### Fixed
 

packages/tailwindcss/src/variants.test.ts

@@ -50,6 +50,14 @@ test('marker', async () => {
 
     .marker\\:flex::marker {
       display: flex;
+    }
+
+    .marker\\:flex ::-webkit-details-marker {
+      display: flex;
+    }
+
+    .marker\\:flex::-webkit-details-marker {
+      display: flex;
     }"
   `)
   expect(await run(['marker/foo:flex'])).toEqual('')
@@ -2255,6 +2263,14 @@ test('variant order', async () => {
       display: flex;
     }
 
+    .marker\\:flex ::-webkit-details-marker {
+      display: flex;
+    }
+
+    .marker\\:flex::-webkit-details-marker {
+      display: flex;
+    }
+
     .selection\\:flex ::selection {
       display: flex;
     }

packages/tailwindcss/src/variants.ts

@@ -622,8 +622,12 @@ export function createVariants(theme: Theme): Variants {
   staticVariant('first-letter', ['&::first-letter'])
   staticVariant('first-line', ['&::first-line'])
 
-  // TODO: Remove alpha vars or no?
-  staticVariant('marker', ['& *::marker', '&::marker'])
+  staticVariant('marker', [
+    '& *::marker',
+    '&::marker',
+    '& *::-webkit-details-marker',
+    '&::-webkit-details-marker',
+  ])
 
   staticVariant('selection', ['& *::selection', '&::selection'])
   staticVariant('file', ['&::file-selector-button'])