diff --git a/src/corePlugins.js b/src/corePlugins.js
index 5309475ce4ca..07d980ff7c8c 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -163,6 +163,11 @@ export let variantPlugins = {
       addVariant(screen, `@media ${query}`)
     }
   },
+
+  orientationVariants: ({ addVariant }) => {
+    addVariant('orientation-portrait', '@media (orientation: portrait)')
+    addVariant('orientation-landscape', '@media (orientation: landscape)')
+  },
 }
 
 export let corePlugins = {
diff --git a/tests/variants.test.css b/tests/variants.test.css
index f1c9b0e495a3..9ba825e4c7e9 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -899,3 +899,15 @@
     }
   }
 }
+@media (orientation: portrait) {
+  .orientation-portrait\:bg-yellow-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  }
+}
+@media (orientation: landscape) {
+  .orientation-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
index 8a671fe235a2..5c6cc23f5983 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -134,6 +134,10 @@
     <div class="lg:animate-spin"></div>
     <div class="hover:animate-spin"></div>
 
+    <!-- Orientation variants -->
+    <div class="orientation-portrait:bg-yellow-300"></div>
+    <div class="orientation-landscape:bg-yellow-300"></div>
+
     <!-- Stacked variants -->
     <div class="open:hover:bg-red-200"></div>
     <div class="file:hover:bg-blue-600"></div>