Add prefers-reduced-transparency variants

tailwindlabs · Nov 7, 2023 · 27510c0 · 27510c0
1 parent 0b7f27c
commit 27510c0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -464,6 +464,11 @@ export let variantPlugins = {
   forcedColorsVariants: ({ addVariant }) => {
     addVariant('forced-colors', '@media (forced-colors: active)')
   },
+
+  reducedTransparencyVariants: ({ addVariant }) => {
+    addVariant('transparency-safe', '@media (prefers-reduced-transparency: no-preference)')
+    addVariant('transparency-reduce', '@media (prefers-reduced-transparency: reduce)')
+  },
 }
 
 let cssTransformValue = [

diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
@@ -762,6 +762,7 @@ function resolvePlugins(context, root) {
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['reducedTransparencyVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]

diff --git a/tests/plugins/variants/reducedTransparencyVariants.test.js b/tests/plugins/variants/reducedTransparencyVariants.test.js
@@ -0,0 +1,14 @@
+import { css, quickVariantPluginTest } from '../../util/run'
+
+quickVariantPluginTest('reducedTransparencyVariants').toMatchFormattedCss(css`
+  @media (prefers-reduced-transparency: no-preference) {
+    .transparency-safe\:flex {
+      display: flex;
+    }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    .transparency-reduce\:flex {
+      display: flex;
+    }
+  }
+`)