Add prefers-contrast variants

tailwindlabs · Nov 23, 2021 · 32626b5 · 32626b5
1 parent a321e3c
commit 32626b5
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -170,6 +170,11 @@ export let variantPlugins = {
  addVariant('portrait', '@media (orientation: portrait)')
  addVariant('landscape', '@media (orientation: landscape)')
  },
+
+ prefersContrastVariants: ({ addVariant }) => {
+ addVariant('contrast-more', '@media (prefers-contrast: more)')
+ addVariant('contrast-less', '@media (prefers-contrast: less)')
+ },
 }
 
 export let corePlugins = {

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

diff --git a/tests/variants.test.css b/tests/variants.test.css
@@ -918,3 +918,15 @@
  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
  }
 }
+@media (prefers-contrast: more) {
+ .contrast-more\:bg-yellow-300 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+ }
+}
+@media (prefers-contrast: less) {
+ .contrast-less\:bg-yellow-300 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+ }
+}
diff --git a/tests/variants.test.html b/tests/variants.test.html
@@ -139,6 +139,10 @@
  <div class="portrait:bg-yellow-300"></div>
  <div class="landscape:bg-yellow-300"></div>
 
+ <!-- Prefers contrast variants -->
+ <div class="contrast-more:bg-yellow-300"></div>
+ <div class="contrast-less:bg-yellow-300"></div>
+
  <!-- Stacked variants -->
  <div class="open:hover:bg-red-200"></div>
  <div class="file:hover:bg-blue-600"></div>