Add prefers-reduced-transparency variants

Co-authored-by: Luke Warlow <[email protected]>

Author: RobinMalfait

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -2382,6 +2382,20 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
+  {
+    "hasDash": true,
+    "isArbitrary": false,
+    "name": "transparency-safe",
+    "selectors": [Function],
+    "values": [],
+  },
+  {
+    "hasDash": true,
+    "isArbitrary": false,
+    "name": "transparency-reduce",
+    "selectors": [Function],
+    "values": [],
+  },
   {
     "hasDash": true,
     "isArbitrary": false,

packages/tailwindcss/src/variants.test.ts

@@ -1516,6 +1516,26 @@ test('landscape', () => {
   `)
 })
 
+test('transparency-safe', () => {
+  expect(run(['transparency-safe:flex'])).toMatchInlineSnapshot(`
+    "@media (prefers-reduced-transparency: no-preference) {
+      .transparency-safe\\:flex {
+        display: flex;
+      }
+    }"
+  `)
+})
+
+test('transparency-reduce', () => {
+  expect(run(['transparency-reduce:flex'])).toMatchInlineSnapshot(`
+    "@media (prefers-reduced-transparency: reduce) {
+      .transparency-reduce\\:flex {
+        display: flex;
+      }
+    }"
+  `)
+})
+
 test('contrast-more', () => {
   expect(run(['contrast-more:flex'])).toMatchInlineSnapshot(`
     "@media (prefers-contrast: more) {

packages/tailwindcss/src/variants.ts

@@ -690,6 +690,13 @@ export function createVariants(theme: Theme): Variants {
   staticVariant('portrait', ['@media (orientation: portrait)'], { compounds: false })
   staticVariant('landscape', ['@media (orientation: landscape)'], { compounds: false })
 
+  staticVariant('transparency-safe', ['@media (prefers-reduced-transparency: no-preference)'], {
+    compounds: false,
+  })
+  staticVariant('transparency-reduce', ['@media (prefers-reduced-transparency: reduce)'], {
+    compounds: false,
+  })
+
   staticVariant('ltr', ['&:where([dir="ltr"], [dir="ltr"] *)'])
   staticVariant('rtl', ['&:where([dir="rtl"], [dir="rtl"] *)'])