diff --git a/src/plugins/aspectRatio.js b/src/plugins/aspectRatio.js
new file mode 100644
index 000000000000..15310b045cef
--- /dev/null
+++ b/src/plugins/aspectRatio.js
@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function () {
+  return createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]])
+}
diff --git a/src/plugins/index.js b/src/plugins/index.js
index be8f4b284362..72fbf41b3b52 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -21,6 +21,7 @@ export { default as clear } from './clear'
 export { default as margin } from './margin'
 export { default as boxSizing } from './boxSizing'
 export { default as display } from './display'
+export { default as aspectRatio } from './aspectRatio'
 export { default as height } from './height'
 export { default as maxHeight } from './maxHeight'
 export { default as minHeight } from './minHeight'
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 377a0ecba14e..2230f16efb20 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -71,6 +71,11 @@ module.exports = {
       pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       bounce: 'bounce 1s infinite',
     },
+    aspectRatio: {
+      'auto': 'auto',
+      'square': '1 / 1',
+      'video': '16 / 9',
+    },
     backdropBlur: (theme) => theme('blur'),
     backdropBrightness: (theme) => theme('brightness'),
     backdropContrast: (theme) => theme('contrast'),
diff --git a/tests/jit/arbitrary-values.test.css b/tests/jit/arbitrary-values.test.css
index ef080df803f7..62781a5d0492 100644
--- a/tests/jit/arbitrary-values.test.css
+++ b/tests/jit/arbitrary-values.test.css
@@ -48,6 +48,12 @@
 .mt-\[clamp\(30px\2c 100px\)\] {
   margin-top: clamp(30px, 100px);
 }
+.aspect-\[16\/9\] {
+  aspect-ratio: 16 / 9;
+}
+.aspect-\[var\(--aspect\)\] {
+  aspect-ratio: var(--aspect);
+}
 .h-\[3\.23rem\] {
   height: 3.23rem;
 }
diff --git a/tests/jit/arbitrary-values.test.html b/tests/jit/arbitrary-values.test.html
index 61b664be046f..92a5b29c8c3c 100644
--- a/tests/jit/arbitrary-values.test.html
+++ b/tests/jit/arbitrary-values.test.html
@@ -15,6 +15,7 @@
     <div class="bg-opacity-[var(--value)]"></div>
     <div class="border-[#f00]"></div>
     <div class="border-[2.5px]"></div>
+    <div class="aspect-[16/9] aspect-[var(--aspect)]"></div>
     <div class="w-[3.23rem]"></div>
     <div class="w-[calc(100%+1rem)]"></div>
     <div class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index 0438acf9e377..ab005dfe45b3 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -193,6 +193,12 @@
 .hidden {
   display: none;
 }
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
 .h-16 {
   height: 4rem;
 }
diff --git a/tests/jit/basic-usage.test.html b/tests/jit/basic-usage.test.html
index 2ebefca1cf40..b6e86d267d91 100644
--- a/tests/jit/basic-usage.test.html
+++ b/tests/jit/basic-usage.test.html
@@ -168,5 +168,6 @@
     <div class="break-words"></div>
     <div class="z-30"></div>
     <div class="content-none"></div>
+    <div class="aspect-square aspect-video"></div>
   </body>
 </html>