Add variants for orientation media feature (#6046)

* Add variants for orientation media feature * Rename to portrait and landscape Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
tailwindlabs · Nov 23, 2021 · a321e3c · a321e3c
1 parent d261531
commit a321e3c
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 7 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -165,6 +165,11 @@ export let variantPlugins = {
       addVariant(screen.name, `@media ${query}`)
     }
   },
+
+  orientationVariants: ({ addVariant }) => {
+    addVariant('portrait', '@media (orientation: portrait)')
+    addVariant('landscape', '@media (orientation: landscape)')
+  },
 }
 
 export let corePlugins = {

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

diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css
@@ -509,11 +509,6 @@ div {
     }
   }
 }
-@media (orientation: portrait) {
-  .portrait\:text-center {
-    text-align: center;
-  }
-}
 @media (min-width: 1280px) and (max-width: 1535px) {
   .range\:text-right {
     text-align: right;

diff --git a/tests/kitchen-sink.test.html b/tests/kitchen-sink.test.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="./tailwind.css" />
   </head>
   <body>
-    <div class="portrait:text-center range:text-right multi:text-left"></div>
+    <div class="range:text-right multi:text-left"></div>
     <div
       class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
     ></div>

diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
@@ -11,7 +11,6 @@ test('it works', () => {
     theme: {
       extend: {
         screens: {
-          portrait: { raw: '(orientation: portrait)' },
           range: { min: '1280px', max: '1535px' },
           multi: [{ min: '640px', max: '767px' }, { max: '868px' }],
         },

diff --git a/tests/variants.test.css b/tests/variants.test.css
@@ -906,3 +906,15 @@
     }
   }
 }
+@media (orientation: portrait) {
+  .portrait\:bg-yellow-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  }
+}
+@media (orientation: landscape) {
+  .landscape\: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
@@ -135,6 +135,10 @@
     <div class="lg:animate-spin"></div>
     <div class="hover:animate-spin"></div>
 
+    <!-- Orientation variants -->
+    <div class="portrait:bg-yellow-300"></div>
+    <div class="landscape:bg-yellow-300"></div>
+
     <!-- Stacked variants -->
     <div class="open:hover:bg-red-200"></div>
     <div class="file:hover:bg-blue-600"></div>