From eba4600c01ee4fc03ec7c974b6bb3bf3ad6e9b91 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 14 Mar 2019 12:19:14 -0400
Subject: [PATCH 1/3] Split pin utilities into inset plugin

---
 defaultConfig.stub.js   |  1 +
 src/corePlugins.js      |  2 ++
 src/plugins/inset.js    | 27 +++++++++++++++++++++++++++
 src/plugins/position.js | 18 ------------------
 4 files changed, 30 insertions(+), 18 deletions(-)
 create mode 100644 src/plugins/inset.js

diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index 044b2555a6e6..54b40fc12b11 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -49,6 +49,7 @@ module.exports = {
     padding: ['responsive'],
     pointerEvents: ['responsive'],
     position: ['responsive'],
+    inset: ['responsive'],
     resize: ['responsive'],
     boxShadow: ['responsive', 'hover', 'focus'],
     fill: [],
diff --git a/src/corePlugins.js b/src/corePlugins.js
index b26d6dfe067e..5362486ead8d 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -42,6 +42,7 @@ import overflow from './plugins/overflow'
 import padding from './plugins/padding'
 import pointerEvents from './plugins/pointerEvents'
 import position from './plugins/position'
+import inset from './plugins/inset'
 import resize from './plugins/resize'
 import boxShadow from './plugins/boxShadow'
 import fill from './plugins/fill'
@@ -110,6 +111,7 @@ export default function({ corePlugins: corePluginConfig }) {
     padding,
     pointerEvents,
     position,
+    inset,
     resize,
     boxShadow,
     fill,
diff --git a/src/plugins/inset.js b/src/plugins/inset.js
new file mode 100644
index 000000000000..6e8523f23e3a
--- /dev/null
+++ b/src/plugins/inset.js
@@ -0,0 +1,27 @@
+export default function() {
+  return function({ addUtilities, config }) {
+    addUtilities(
+      {
+        '.pin-none': {
+          top: 'auto',
+          right: 'auto',
+          bottom: 'auto',
+          left: 'auto',
+        },
+        '.pin': {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+        },
+        '.pin-y': { top: 0, bottom: 0 },
+        '.pin-x': { right: 0, left: 0 },
+        '.pin-t': { top: 0 },
+        '.pin-r': { right: 0 },
+        '.pin-b': { bottom: 0 },
+        '.pin-l': { left: 0 },
+      },
+      config('variants.inset')
+    )
+  }
+}
diff --git a/src/plugins/position.js b/src/plugins/position.js
index 1fdbb72691e8..5e031e3a0dc8 100644
--- a/src/plugins/position.js
+++ b/src/plugins/position.js
@@ -7,24 +7,6 @@ export default function() {
         '.absolute': { position: 'absolute' },
         '.relative': { position: 'relative' },
         '.sticky': { position: 'sticky' },
-        '.pin-none': {
-          top: 'auto',
-          right: 'auto',
-          bottom: 'auto',
-          left: 'auto',
-        },
-        '.pin': {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-        },
-        '.pin-y': { top: 0, bottom: 0 },
-        '.pin-x': { right: 0, left: 0 },
-        '.pin-t': { top: 0 },
-        '.pin-r': { right: 0 },
-        '.pin-b': { bottom: 0 },
-        '.pin-l': { left: 0 },
       },
       config('variants.position')
     )

From 1940e31b124b517f8d2c2c4b8a8d0099ff626d02 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 14 Mar 2019 12:23:51 -0400
Subject: [PATCH 2/3] Rename pin utilities to top/right/bottom/left/inset

---
 .../fixtures/tailwind-output-important.css    | 80 +++++++++----------
 __tests__/fixtures/tailwind-output.css        | 80 +++++++++----------
 src/plugins/inset.js                          | 16 ++--
 3 files changed, 88 insertions(+), 88 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index fe03a35b012f..f3882f5198b3 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -5667,43 +5667,43 @@ samp {
   position: sticky !important;
 }
 
-.pin-none {
+.inset-auto {
   top: auto !important;
   right: auto !important;
   bottom: auto !important;
   left: auto !important;
 }
 
-.pin {
+.inset-0 {
   top: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   left: 0 !important;
 }
 
-.pin-y {
+.inset-y-0 {
   top: 0 !important;
   bottom: 0 !important;
 }
 
-.pin-x {
+.inset-x-0 {
   right: 0 !important;
   left: 0 !important;
 }
 
-.pin-t {
+.top-0 {
   top: 0 !important;
 }
 
-.pin-r {
+.right-0 {
   right: 0 !important;
 }
 
-.pin-b {
+.bottom-0 {
   bottom: 0 !important;
 }
 
-.pin-l {
+.left-0 {
   left: 0 !important;
 }
 
@@ -12416,43 +12416,43 @@ samp {
     position: sticky !important;
   }
 
-  .sm\:pin-none {
+  .sm\:inset-auto {
     top: auto !important;
     right: auto !important;
     bottom: auto !important;
     left: auto !important;
   }
 
-  .sm\:pin {
+  .sm\:inset-0 {
     top: 0 !important;
     right: 0 !important;
     bottom: 0 !important;
     left: 0 !important;
   }
 
-  .sm\:pin-y {
+  .sm\:inset-y-0 {
     top: 0 !important;
     bottom: 0 !important;
   }
 
-  .sm\:pin-x {
+  .sm\:inset-x-0 {
     right: 0 !important;
     left: 0 !important;
   }
 
-  .sm\:pin-t {
+  .sm\:top-0 {
     top: 0 !important;
   }
 
-  .sm\:pin-r {
+  .sm\:right-0 {
     right: 0 !important;
   }
 
-  .sm\:pin-b {
+  .sm\:bottom-0 {
     bottom: 0 !important;
   }
 
-  .sm\:pin-l {
+  .sm\:left-0 {
     left: 0 !important;
   }
 
@@ -19158,43 +19158,43 @@ samp {
     position: sticky !important;
   }
 
-  .md\:pin-none {
+  .md\:inset-auto {
     top: auto !important;
     right: auto !important;
     bottom: auto !important;
     left: auto !important;
   }
 
-  .md\:pin {
+  .md\:inset-0 {
     top: 0 !important;
     right: 0 !important;
     bottom: 0 !important;
     left: 0 !important;
   }
 
-  .md\:pin-y {
+  .md\:inset-y-0 {
     top: 0 !important;
     bottom: 0 !important;
   }
 
-  .md\:pin-x {
+  .md\:inset-x-0 {
     right: 0 !important;
     left: 0 !important;
   }
 
-  .md\:pin-t {
+  .md\:top-0 {
     top: 0 !important;
   }
 
-  .md\:pin-r {
+  .md\:right-0 {
     right: 0 !important;
   }
 
-  .md\:pin-b {
+  .md\:bottom-0 {
     bottom: 0 !important;
   }
 
-  .md\:pin-l {
+  .md\:left-0 {
     left: 0 !important;
   }
 
@@ -25900,43 +25900,43 @@ samp {
     position: sticky !important;
   }
 
-  .lg\:pin-none {
+  .lg\:inset-auto {
     top: auto !important;
     right: auto !important;
     bottom: auto !important;
     left: auto !important;
   }
 
-  .lg\:pin {
+  .lg\:inset-0 {
     top: 0 !important;
     right: 0 !important;
     bottom: 0 !important;
     left: 0 !important;
   }
 
-  .lg\:pin-y {
+  .lg\:inset-y-0 {
     top: 0 !important;
     bottom: 0 !important;
   }
 
-  .lg\:pin-x {
+  .lg\:inset-x-0 {
     right: 0 !important;
     left: 0 !important;
   }
 
-  .lg\:pin-t {
+  .lg\:top-0 {
     top: 0 !important;
   }
 
-  .lg\:pin-r {
+  .lg\:right-0 {
     right: 0 !important;
   }
 
-  .lg\:pin-b {
+  .lg\:bottom-0 {
     bottom: 0 !important;
   }
 
-  .lg\:pin-l {
+  .lg\:left-0 {
     left: 0 !important;
   }
 
@@ -32642,43 +32642,43 @@ samp {
     position: sticky !important;
   }
 
-  .xl\:pin-none {
+  .xl\:inset-auto {
     top: auto !important;
     right: auto !important;
     bottom: auto !important;
     left: auto !important;
   }
 
-  .xl\:pin {
+  .xl\:inset-0 {
     top: 0 !important;
     right: 0 !important;
     bottom: 0 !important;
     left: 0 !important;
   }
 
-  .xl\:pin-y {
+  .xl\:inset-y-0 {
     top: 0 !important;
     bottom: 0 !important;
   }
 
-  .xl\:pin-x {
+  .xl\:inset-x-0 {
     right: 0 !important;
     left: 0 !important;
   }
 
-  .xl\:pin-t {
+  .xl\:top-0 {
     top: 0 !important;
   }
 
-  .xl\:pin-r {
+  .xl\:right-0 {
     right: 0 !important;
   }
 
-  .xl\:pin-b {
+  .xl\:bottom-0 {
     bottom: 0 !important;
   }
 
-  .xl\:pin-l {
+  .xl\:left-0 {
     left: 0 !important;
   }
 
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index b4c3f1828e4f..647ea2f7d1f4 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -5667,43 +5667,43 @@ samp {
   position: sticky;
 }
 
-.pin-none {
+.inset-auto {
   top: auto;
   right: auto;
   bottom: auto;
   left: auto;
 }
 
-.pin {
+.inset-0 {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
 
-.pin-y {
+.inset-y-0 {
   top: 0;
   bottom: 0;
 }
 
-.pin-x {
+.inset-x-0 {
   right: 0;
   left: 0;
 }
 
-.pin-t {
+.top-0 {
   top: 0;
 }
 
-.pin-r {
+.right-0 {
   right: 0;
 }
 
-.pin-b {
+.bottom-0 {
   bottom: 0;
 }
 
-.pin-l {
+.left-0 {
   left: 0;
 }
 
@@ -12416,43 +12416,43 @@ samp {
     position: sticky;
   }
 
-  .sm\:pin-none {
+  .sm\:inset-auto {
     top: auto;
     right: auto;
     bottom: auto;
     left: auto;
   }
 
-  .sm\:pin {
+  .sm\:inset-0 {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
   }
 
-  .sm\:pin-y {
+  .sm\:inset-y-0 {
     top: 0;
     bottom: 0;
   }
 
-  .sm\:pin-x {
+  .sm\:inset-x-0 {
     right: 0;
     left: 0;
   }
 
-  .sm\:pin-t {
+  .sm\:top-0 {
     top: 0;
   }
 
-  .sm\:pin-r {
+  .sm\:right-0 {
     right: 0;
   }
 
-  .sm\:pin-b {
+  .sm\:bottom-0 {
     bottom: 0;
   }
 
-  .sm\:pin-l {
+  .sm\:left-0 {
     left: 0;
   }
 
@@ -19158,43 +19158,43 @@ samp {
     position: sticky;
   }
 
-  .md\:pin-none {
+  .md\:inset-auto {
     top: auto;
     right: auto;
     bottom: auto;
     left: auto;
   }
 
-  .md\:pin {
+  .md\:inset-0 {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
   }
 
-  .md\:pin-y {
+  .md\:inset-y-0 {
     top: 0;
     bottom: 0;
   }
 
-  .md\:pin-x {
+  .md\:inset-x-0 {
     right: 0;
     left: 0;
   }
 
-  .md\:pin-t {
+  .md\:top-0 {
     top: 0;
   }
 
-  .md\:pin-r {
+  .md\:right-0 {
     right: 0;
   }
 
-  .md\:pin-b {
+  .md\:bottom-0 {
     bottom: 0;
   }
 
-  .md\:pin-l {
+  .md\:left-0 {
     left: 0;
   }
 
@@ -25900,43 +25900,43 @@ samp {
     position: sticky;
   }
 
-  .lg\:pin-none {
+  .lg\:inset-auto {
     top: auto;
     right: auto;
     bottom: auto;
     left: auto;
   }
 
-  .lg\:pin {
+  .lg\:inset-0 {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
   }
 
-  .lg\:pin-y {
+  .lg\:inset-y-0 {
     top: 0;
     bottom: 0;
   }
 
-  .lg\:pin-x {
+  .lg\:inset-x-0 {
     right: 0;
     left: 0;
   }
 
-  .lg\:pin-t {
+  .lg\:top-0 {
     top: 0;
   }
 
-  .lg\:pin-r {
+  .lg\:right-0 {
     right: 0;
   }
 
-  .lg\:pin-b {
+  .lg\:bottom-0 {
     bottom: 0;
   }
 
-  .lg\:pin-l {
+  .lg\:left-0 {
     left: 0;
   }
 
@@ -32642,43 +32642,43 @@ samp {
     position: sticky;
   }
 
-  .xl\:pin-none {
+  .xl\:inset-auto {
     top: auto;
     right: auto;
     bottom: auto;
     left: auto;
   }
 
-  .xl\:pin {
+  .xl\:inset-0 {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
   }
 
-  .xl\:pin-y {
+  .xl\:inset-y-0 {
     top: 0;
     bottom: 0;
   }
 
-  .xl\:pin-x {
+  .xl\:inset-x-0 {
     right: 0;
     left: 0;
   }
 
-  .xl\:pin-t {
+  .xl\:top-0 {
     top: 0;
   }
 
-  .xl\:pin-r {
+  .xl\:right-0 {
     right: 0;
   }
 
-  .xl\:pin-b {
+  .xl\:bottom-0 {
     bottom: 0;
   }
 
-  .xl\:pin-l {
+  .xl\:left-0 {
     left: 0;
   }
 
diff --git a/src/plugins/inset.js b/src/plugins/inset.js
index 6e8523f23e3a..a7caff86eebd 100644
--- a/src/plugins/inset.js
+++ b/src/plugins/inset.js
@@ -2,24 +2,24 @@ export default function() {
   return function({ addUtilities, config }) {
     addUtilities(
       {
-        '.pin-none': {
+        '.inset-auto': {
           top: 'auto',
           right: 'auto',
           bottom: 'auto',
           left: 'auto',
         },
-        '.pin': {
+        '.inset-0': {
           top: 0,
           right: 0,
           bottom: 0,
           left: 0,
         },
-        '.pin-y': { top: 0, bottom: 0 },
-        '.pin-x': { right: 0, left: 0 },
-        '.pin-t': { top: 0 },
-        '.pin-r': { right: 0 },
-        '.pin-b': { bottom: 0 },
-        '.pin-l': { left: 0 },
+        '.inset-y-0': { top: 0, bottom: 0 },
+        '.inset-x-0': { right: 0, left: 0 },
+        '.top-0': { top: 0 },
+        '.right-0': { right: 0 },
+        '.bottom-0': { bottom: 0 },
+        '.left-0': { left: 0 },
       },
       config('variants.inset')
     )

From 33bfb8793fc08d4b737fa1447da6f502d0887bea Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 14 Mar 2019 12:35:37 -0400
Subject: [PATCH 3/3] Make inset utilities customizable

---
 .../fixtures/tailwind-output-important.css    | 200 +++++++++++++++---
 __tests__/fixtures/tailwind-output.css        | 200 +++++++++++++++---
 defaultTheme.js                               |   4 +
 src/plugins/inset.js                          |  51 +++--
 4 files changed, 362 insertions(+), 93 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index f3882f5198b3..e719be6e68e9 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -5667,13 +5667,6 @@ samp {
   position: sticky !important;
 }
 
-.inset-auto {
-  top: auto !important;
-  right: auto !important;
-  bottom: auto !important;
-  left: auto !important;
-}
-
 .inset-0 {
   top: 0 !important;
   right: 0 !important;
@@ -5681,6 +5674,13 @@ samp {
   left: 0 !important;
 }
 
+.inset-auto {
+  top: auto !important;
+  right: auto !important;
+  bottom: auto !important;
+  left: auto !important;
+}
+
 .inset-y-0 {
   top: 0 !important;
   bottom: 0 !important;
@@ -5691,6 +5691,16 @@ samp {
   left: 0 !important;
 }
 
+.inset-y-auto {
+  top: auto !important;
+  bottom: auto !important;
+}
+
+.inset-x-auto {
+  right: auto !important;
+  left: auto !important;
+}
+
 .top-0 {
   top: 0 !important;
 }
@@ -5707,6 +5717,22 @@ samp {
   left: 0 !important;
 }
 
+.top-auto {
+  top: auto !important;
+}
+
+.right-auto {
+  right: auto !important;
+}
+
+.bottom-auto {
+  bottom: auto !important;
+}
+
+.left-auto {
+  left: auto !important;
+}
+
 .resize-none {
   resize: none !important;
 }
@@ -12416,13 +12442,6 @@ samp {
     position: sticky !important;
   }
 
-  .sm\:inset-auto {
-    top: auto !important;
-    right: auto !important;
-    bottom: auto !important;
-    left: auto !important;
-  }
-
   .sm\:inset-0 {
     top: 0 !important;
     right: 0 !important;
@@ -12430,6 +12449,13 @@ samp {
     left: 0 !important;
   }
 
+  .sm\:inset-auto {
+    top: auto !important;
+    right: auto !important;
+    bottom: auto !important;
+    left: auto !important;
+  }
+
   .sm\:inset-y-0 {
     top: 0 !important;
     bottom: 0 !important;
@@ -12440,6 +12466,16 @@ samp {
     left: 0 !important;
   }
 
+  .sm\:inset-y-auto {
+    top: auto !important;
+    bottom: auto !important;
+  }
+
+  .sm\:inset-x-auto {
+    right: auto !important;
+    left: auto !important;
+  }
+
   .sm\:top-0 {
     top: 0 !important;
   }
@@ -12456,6 +12492,22 @@ samp {
     left: 0 !important;
   }
 
+  .sm\:top-auto {
+    top: auto !important;
+  }
+
+  .sm\:right-auto {
+    right: auto !important;
+  }
+
+  .sm\:bottom-auto {
+    bottom: auto !important;
+  }
+
+  .sm\:left-auto {
+    left: auto !important;
+  }
+
   .sm\:resize-none {
     resize: none !important;
   }
@@ -19158,13 +19210,6 @@ samp {
     position: sticky !important;
   }
 
-  .md\:inset-auto {
-    top: auto !important;
-    right: auto !important;
-    bottom: auto !important;
-    left: auto !important;
-  }
-
   .md\:inset-0 {
     top: 0 !important;
     right: 0 !important;
@@ -19172,6 +19217,13 @@ samp {
     left: 0 !important;
   }
 
+  .md\:inset-auto {
+    top: auto !important;
+    right: auto !important;
+    bottom: auto !important;
+    left: auto !important;
+  }
+
   .md\:inset-y-0 {
     top: 0 !important;
     bottom: 0 !important;
@@ -19182,6 +19234,16 @@ samp {
     left: 0 !important;
   }
 
+  .md\:inset-y-auto {
+    top: auto !important;
+    bottom: auto !important;
+  }
+
+  .md\:inset-x-auto {
+    right: auto !important;
+    left: auto !important;
+  }
+
   .md\:top-0 {
     top: 0 !important;
   }
@@ -19198,6 +19260,22 @@ samp {
     left: 0 !important;
   }
 
+  .md\:top-auto {
+    top: auto !important;
+  }
+
+  .md\:right-auto {
+    right: auto !important;
+  }
+
+  .md\:bottom-auto {
+    bottom: auto !important;
+  }
+
+  .md\:left-auto {
+    left: auto !important;
+  }
+
   .md\:resize-none {
     resize: none !important;
   }
@@ -25900,13 +25978,6 @@ samp {
     position: sticky !important;
   }
 
-  .lg\:inset-auto {
-    top: auto !important;
-    right: auto !important;
-    bottom: auto !important;
-    left: auto !important;
-  }
-
   .lg\:inset-0 {
     top: 0 !important;
     right: 0 !important;
@@ -25914,6 +25985,13 @@ samp {
     left: 0 !important;
   }
 
+  .lg\:inset-auto {
+    top: auto !important;
+    right: auto !important;
+    bottom: auto !important;
+    left: auto !important;
+  }
+
   .lg\:inset-y-0 {
     top: 0 !important;
     bottom: 0 !important;
@@ -25924,6 +26002,16 @@ samp {
     left: 0 !important;
   }
 
+  .lg\:inset-y-auto {
+    top: auto !important;
+    bottom: auto !important;
+  }
+
+  .lg\:inset-x-auto {
+    right: auto !important;
+    left: auto !important;
+  }
+
   .lg\:top-0 {
     top: 0 !important;
   }
@@ -25940,6 +26028,22 @@ samp {
     left: 0 !important;
   }
 
+  .lg\:top-auto {
+    top: auto !important;
+  }
+
+  .lg\:right-auto {
+    right: auto !important;
+  }
+
+  .lg\:bottom-auto {
+    bottom: auto !important;
+  }
+
+  .lg\:left-auto {
+    left: auto !important;
+  }
+
   .lg\:resize-none {
     resize: none !important;
   }
@@ -32642,13 +32746,6 @@ samp {
     position: sticky !important;
   }
 
-  .xl\:inset-auto {
-    top: auto !important;
-    right: auto !important;
-    bottom: auto !important;
-    left: auto !important;
-  }
-
   .xl\:inset-0 {
     top: 0 !important;
     right: 0 !important;
@@ -32656,6 +32753,13 @@ samp {
     left: 0 !important;
   }
 
+  .xl\:inset-auto {
+    top: auto !important;
+    right: auto !important;
+    bottom: auto !important;
+    left: auto !important;
+  }
+
   .xl\:inset-y-0 {
     top: 0 !important;
     bottom: 0 !important;
@@ -32666,6 +32770,16 @@ samp {
     left: 0 !important;
   }
 
+  .xl\:inset-y-auto {
+    top: auto !important;
+    bottom: auto !important;
+  }
+
+  .xl\:inset-x-auto {
+    right: auto !important;
+    left: auto !important;
+  }
+
   .xl\:top-0 {
     top: 0 !important;
   }
@@ -32682,6 +32796,22 @@ samp {
     left: 0 !important;
   }
 
+  .xl\:top-auto {
+    top: auto !important;
+  }
+
+  .xl\:right-auto {
+    right: auto !important;
+  }
+
+  .xl\:bottom-auto {
+    bottom: auto !important;
+  }
+
+  .xl\:left-auto {
+    left: auto !important;
+  }
+
   .xl\:resize-none {
     resize: none !important;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 647ea2f7d1f4..a51b6710e106 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -5667,13 +5667,6 @@ samp {
   position: sticky;
 }
 
-.inset-auto {
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
-}
-
 .inset-0 {
   top: 0;
   right: 0;
@@ -5681,6 +5674,13 @@ samp {
   left: 0;
 }
 
+.inset-auto {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+}
+
 .inset-y-0 {
   top: 0;
   bottom: 0;
@@ -5691,6 +5691,16 @@ samp {
   left: 0;
 }
 
+.inset-y-auto {
+  top: auto;
+  bottom: auto;
+}
+
+.inset-x-auto {
+  right: auto;
+  left: auto;
+}
+
 .top-0 {
   top: 0;
 }
@@ -5707,6 +5717,22 @@ samp {
   left: 0;
 }
 
+.top-auto {
+  top: auto;
+}
+
+.right-auto {
+  right: auto;
+}
+
+.bottom-auto {
+  bottom: auto;
+}
+
+.left-auto {
+  left: auto;
+}
+
 .resize-none {
   resize: none;
 }
@@ -12416,13 +12442,6 @@ samp {
     position: sticky;
   }
 
-  .sm\:inset-auto {
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-  }
-
   .sm\:inset-0 {
     top: 0;
     right: 0;
@@ -12430,6 +12449,13 @@ samp {
     left: 0;
   }
 
+  .sm\:inset-auto {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
   .sm\:inset-y-0 {
     top: 0;
     bottom: 0;
@@ -12440,6 +12466,16 @@ samp {
     left: 0;
   }
 
+  .sm\:inset-y-auto {
+    top: auto;
+    bottom: auto;
+  }
+
+  .sm\:inset-x-auto {
+    right: auto;
+    left: auto;
+  }
+
   .sm\:top-0 {
     top: 0;
   }
@@ -12456,6 +12492,22 @@ samp {
     left: 0;
   }
 
+  .sm\:top-auto {
+    top: auto;
+  }
+
+  .sm\:right-auto {
+    right: auto;
+  }
+
+  .sm\:bottom-auto {
+    bottom: auto;
+  }
+
+  .sm\:left-auto {
+    left: auto;
+  }
+
   .sm\:resize-none {
     resize: none;
   }
@@ -19158,13 +19210,6 @@ samp {
     position: sticky;
   }
 
-  .md\:inset-auto {
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-  }
-
   .md\:inset-0 {
     top: 0;
     right: 0;
@@ -19172,6 +19217,13 @@ samp {
     left: 0;
   }
 
+  .md\:inset-auto {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
   .md\:inset-y-0 {
     top: 0;
     bottom: 0;
@@ -19182,6 +19234,16 @@ samp {
     left: 0;
   }
 
+  .md\:inset-y-auto {
+    top: auto;
+    bottom: auto;
+  }
+
+  .md\:inset-x-auto {
+    right: auto;
+    left: auto;
+  }
+
   .md\:top-0 {
     top: 0;
   }
@@ -19198,6 +19260,22 @@ samp {
     left: 0;
   }
 
+  .md\:top-auto {
+    top: auto;
+  }
+
+  .md\:right-auto {
+    right: auto;
+  }
+
+  .md\:bottom-auto {
+    bottom: auto;
+  }
+
+  .md\:left-auto {
+    left: auto;
+  }
+
   .md\:resize-none {
     resize: none;
   }
@@ -25900,13 +25978,6 @@ samp {
     position: sticky;
   }
 
-  .lg\:inset-auto {
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-  }
-
   .lg\:inset-0 {
     top: 0;
     right: 0;
@@ -25914,6 +25985,13 @@ samp {
     left: 0;
   }
 
+  .lg\:inset-auto {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
   .lg\:inset-y-0 {
     top: 0;
     bottom: 0;
@@ -25924,6 +26002,16 @@ samp {
     left: 0;
   }
 
+  .lg\:inset-y-auto {
+    top: auto;
+    bottom: auto;
+  }
+
+  .lg\:inset-x-auto {
+    right: auto;
+    left: auto;
+  }
+
   .lg\:top-0 {
     top: 0;
   }
@@ -25940,6 +26028,22 @@ samp {
     left: 0;
   }
 
+  .lg\:top-auto {
+    top: auto;
+  }
+
+  .lg\:right-auto {
+    right: auto;
+  }
+
+  .lg\:bottom-auto {
+    bottom: auto;
+  }
+
+  .lg\:left-auto {
+    left: auto;
+  }
+
   .lg\:resize-none {
     resize: none;
   }
@@ -32642,13 +32746,6 @@ samp {
     position: sticky;
   }
 
-  .xl\:inset-auto {
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-  }
-
   .xl\:inset-0 {
     top: 0;
     right: 0;
@@ -32656,6 +32753,13 @@ samp {
     left: 0;
   }
 
+  .xl\:inset-auto {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
   .xl\:inset-y-0 {
     top: 0;
     bottom: 0;
@@ -32666,6 +32770,16 @@ samp {
     left: 0;
   }
 
+  .xl\:inset-y-auto {
+    top: auto;
+    bottom: auto;
+  }
+
+  .xl\:inset-x-auto {
+    right: auto;
+    left: auto;
+  }
+
   .xl\:top-0 {
     top: 0;
   }
@@ -32682,6 +32796,22 @@ samp {
     left: 0;
   }
 
+  .xl\:top-auto {
+    top: auto;
+  }
+
+  .xl\:right-auto {
+    right: auto;
+  }
+
+  .xl\:bottom-auto {
+    bottom: auto;
+  }
+
+  .xl\:left-auto {
+    left: auto;
+  }
+
   .xl\:resize-none {
     resize: none;
   }
diff --git a/defaultTheme.js b/defaultTheme.js
index 447c0f4322aa..9f9d76cce838 100644
--- a/defaultTheme.js
+++ b/defaultTheme.js
@@ -366,5 +366,9 @@ module.exports = function() {
       disc: 'disc',
       decimal: 'decimal',
     },
+    inset: {
+      '0': 0,
+      auto: 'auto',
+    },
   }
 }
diff --git a/src/plugins/inset.js b/src/plugins/inset.js
index a7caff86eebd..312119d934f2 100644
--- a/src/plugins/inset.js
+++ b/src/plugins/inset.js
@@ -1,27 +1,32 @@
+import _ from 'lodash'
+
 export default function() {
-  return function({ addUtilities, config }) {
-    addUtilities(
-      {
-        '.inset-auto': {
-          top: 'auto',
-          right: 'auto',
-          bottom: 'auto',
-          left: 'auto',
+  return function({ addUtilities, e, config }) {
+    const generators = [
+      (size, modifier) => ({
+        [`.${e(`inset-${modifier}`)}`]: {
+          top: `${size}`,
+          right: `${size}`,
+          bottom: `${size}`,
+          left: `${size}`,
         },
-        '.inset-0': {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-        },
-        '.inset-y-0': { top: 0, bottom: 0 },
-        '.inset-x-0': { right: 0, left: 0 },
-        '.top-0': { top: 0 },
-        '.right-0': { right: 0 },
-        '.bottom-0': { bottom: 0 },
-        '.left-0': { left: 0 },
-      },
-      config('variants.inset')
-    )
+      }),
+      (size, modifier) => ({
+        [`.${e(`inset-y-${modifier}`)}`]: { top: `${size}`, bottom: `${size}` },
+        [`.${e(`inset-x-${modifier}`)}`]: { right: `${size}`, left: `${size}` },
+      }),
+      (size, modifier) => ({
+        [`.${e(`top-${modifier}`)}`]: { top: `${size}` },
+        [`.${e(`right-${modifier}`)}`]: { right: `${size}` },
+        [`.${e(`bottom-${modifier}`)}`]: { bottom: `${size}` },
+        [`.${e(`left-${modifier}`)}`]: { left: `${size}` },
+      }),
+    ]
+
+    const utilities = _.flatMap(generators, generator => {
+      return _.flatMap(config('theme.inset'), generator)
+    })
+
+    addUtilities(utilities, config('variants.inset'))
   }
 }