dark mode should have precedence over prefers contrast variants

tailwindlabs · May 23, 2022 · a71ee5c · a71ee5c
1 parent aa39253
commit a71ee5c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
@@ -606,11 +606,11 @@ function resolvePlugins(context, root) {
   let afterVariants = [
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
+    variantPlugins['prefersContrastVariants'],
     variantPlugins['darkVariants'],
     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
@@ -759,6 +759,18 @@
       var(--tw-shadow);
   }
 }
+@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));
+  }
+}
 .dark .dark\:shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -878,15 +890,3 @@
     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));
-  }
-}