diff --git a/src/corePlugins.js b/src/corePlugins.js
index 5309475ce4ca..b60f66cfaa26 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -163,6 +163,11 @@ export let variantPlugins = {
addVariant(screen, `@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
index 2701adb9a3a2..dfd3d253b7fb 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -575,6 +575,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
index 0ebe1f76cb76..729049b24f57 100644
--- 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
index 6a57cfe0f187..5215db2ad388 100644
--- a/tests/kitchen-sink.test.html
+++ b/tests/kitchen-sink.test.html
@@ -8,7 +8,7 @@
-
+
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
index 6fcbe0be0121..83b3e6e73653 100644
--- 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
index f1c9b0e495a3..e1d671c29f5e 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -899,3 +899,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
index 8a671fe235a2..a6b701b71f6c 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -134,6 +134,10 @@
+
+
+
+