From acf719b7a123307bdcf9a8e7b1a44c6f721f1037 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 26 Feb 2019 17:00:59 -0500
Subject: [PATCH 1/3] Add new shadows (need to update fixtures though)

---
 defaultTheme.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/defaultTheme.js b/defaultTheme.js
index b3d8d5fc71a0..a29cb3f3a662 100644
--- a/defaultTheme.js
+++ b/defaultTheme.js
@@ -285,9 +285,11 @@ module.exports = function() {
       top: 'top',
     },
     boxShadow: {
-      default: '0 2px 4px 0 rgba(0,0,0,0.10)',
-      md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
-      lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
+      default: '0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.06)',
+      md: '0 3px 6px 0 rgba(0,0,0,0.10), 0 2px 4px 0 rgba(0,0,0,0.06)',
+      lg: '0 10px 20px 0 rgba(0,0,0,0.10), 0 3px 6px 0 rgba(0,0,0,0.06)',
+      xl: '0 15px 25px 0 rgba(0,0,0,0.10), 0 5px 10px 0 rgba(0,0,0,0.04)',
+      '2xl': '0 20px 40px 0 rgba(0,0,0,0.20)',
       inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
       outline: '0 0 0 3px rgba(52,144,220,0.5)',
       none: 'none',

From 361ffb6a2c86d8c11ed83e65c26c36d9b729ff08 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 26 Feb 2019 18:32:48 -0500
Subject: [PATCH 2/3] Update fixtures

---
 .../fixtures/tailwind-output-important.css    | 210 ++++++++++++++----
 __tests__/fixtures/tailwind-output.css        | 210 ++++++++++++++----
 defaultTheme.js                               |  10 +-
 3 files changed, 335 insertions(+), 95 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index fe806ad3f051..fbd12ada825e 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -4782,15 +4782,23 @@ table {
 }
 
 .shadow {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
 }
 
 .shadow-md {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+}
+
+.shadow-xl {
+  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+}
+
+.shadow-2xl {
+  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
 }
 
 .shadow-inner {
@@ -4806,15 +4814,23 @@ table {
 }
 
 .hover\:shadow:hover {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
 }
 
 .hover\:shadow-md:hover {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
 }
 
 .hover\:shadow-lg:hover {
-  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+}
+
+.hover\:shadow-xl:hover {
+  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+}
+
+.hover\:shadow-2xl:hover {
+  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
 }
 
 .hover\:shadow-inner:hover {
@@ -4830,15 +4846,23 @@ table {
 }
 
 .focus\:shadow:focus {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
 }
 
 .focus\:shadow-md:focus {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
 }
 
 .focus\:shadow-lg:focus {
-  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+}
+
+.focus\:shadow-xl:focus {
+  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+}
+
+.focus\:shadow-2xl:focus {
+  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
 }
 
 .focus\:shadow-inner:focus {
@@ -10459,15 +10483,23 @@ table {
   }
 
   .sm\:shadow {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .sm\:shadow-md {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .sm\:shadow-lg {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .sm\:shadow-xl {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .sm\:shadow-2xl {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .sm\:shadow-inner {
@@ -10483,15 +10515,23 @@ table {
   }
 
   .sm\:hover\:shadow:hover {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .sm\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .sm\:hover\:shadow-lg:hover {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .sm\:hover\:shadow-xl:hover {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .sm\:hover\:shadow-2xl:hover {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .sm\:hover\:shadow-inner:hover {
@@ -10507,15 +10547,23 @@ table {
   }
 
   .sm\:focus\:shadow:focus {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .sm\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .sm\:focus\:shadow-lg:focus {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .sm\:focus\:shadow-xl:focus {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .sm\:focus\:shadow-2xl:focus {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .sm\:focus\:shadow-inner:focus {
@@ -16129,15 +16177,23 @@ table {
   }
 
   .md\:shadow {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .md\:shadow-md {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .md\:shadow-lg {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .md\:shadow-xl {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .md\:shadow-2xl {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .md\:shadow-inner {
@@ -16153,15 +16209,23 @@ table {
   }
 
   .md\:hover\:shadow:hover {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .md\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .md\:hover\:shadow-lg:hover {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .md\:hover\:shadow-xl:hover {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .md\:hover\:shadow-2xl:hover {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .md\:hover\:shadow-inner:hover {
@@ -16177,15 +16241,23 @@ table {
   }
 
   .md\:focus\:shadow:focus {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .md\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .md\:focus\:shadow-lg:focus {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .md\:focus\:shadow-xl:focus {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .md\:focus\:shadow-2xl:focus {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .md\:focus\:shadow-inner:focus {
@@ -21799,15 +21871,23 @@ table {
   }
 
   .lg\:shadow {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .lg\:shadow-md {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .lg\:shadow-lg {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .lg\:shadow-xl {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .lg\:shadow-2xl {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .lg\:shadow-inner {
@@ -21823,15 +21903,23 @@ table {
   }
 
   .lg\:hover\:shadow:hover {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .lg\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .lg\:hover\:shadow-lg:hover {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .lg\:hover\:shadow-xl:hover {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .lg\:hover\:shadow-2xl:hover {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .lg\:hover\:shadow-inner:hover {
@@ -21847,15 +21935,23 @@ table {
   }
 
   .lg\:focus\:shadow:focus {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .lg\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .lg\:focus\:shadow-lg:focus {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .lg\:focus\:shadow-xl:focus {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .lg\:focus\:shadow-2xl:focus {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .lg\:focus\:shadow-inner:focus {
@@ -27469,15 +27565,23 @@ table {
   }
 
   .xl\:shadow {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .xl\:shadow-md {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .xl\:shadow-lg {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .xl\:shadow-xl {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .xl\:shadow-2xl {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .xl\:shadow-inner {
@@ -27493,15 +27597,23 @@ table {
   }
 
   .xl\:hover\:shadow:hover {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .xl\:hover\:shadow-xl:hover {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .xl\:hover\:shadow-2xl:hover {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .xl\:hover\:shadow-inner:hover {
@@ -27517,15 +27629,23 @@ table {
   }
 
   .xl\:focus\:shadow:focus {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1) !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
   }
 
   .xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  }
+
+  .xl\:focus\:shadow-xl:focus {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  }
+
+  .xl\:focus\:shadow-2xl:focus {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
   }
 
   .xl\:focus\:shadow-inner:focus {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index b4ebd9cd3e5e..acc1c6c5f911 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -4782,15 +4782,23 @@ table {
 }
 
 .shadow {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
 }
 
 .shadow-md {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
 }
 
 .shadow-lg {
-  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+}
+
+.shadow-xl {
+  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+}
+
+.shadow-2xl {
+  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
 }
 
 .shadow-inner {
@@ -4806,15 +4814,23 @@ table {
 }
 
 .hover\:shadow:hover {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
 }
 
 .hover\:shadow-md:hover {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
 }
 
 .hover\:shadow-lg:hover {
-  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+}
+
+.hover\:shadow-xl:hover {
+  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+}
+
+.hover\:shadow-2xl:hover {
+  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
 }
 
 .hover\:shadow-inner:hover {
@@ -4830,15 +4846,23 @@ table {
 }
 
 .focus\:shadow:focus {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
 }
 
 .focus\:shadow-md:focus {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
 }
 
 .focus\:shadow-lg:focus {
-  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+}
+
+.focus\:shadow-xl:focus {
+  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+}
+
+.focus\:shadow-2xl:focus {
+  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
 }
 
 .focus\:shadow-inner:focus {
@@ -10459,15 +10483,23 @@ table {
   }
 
   .sm\:shadow {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .sm\:shadow-md {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .sm\:shadow-lg {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .sm\:shadow-xl {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .sm\:shadow-2xl {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .sm\:shadow-inner {
@@ -10483,15 +10515,23 @@ table {
   }
 
   .sm\:hover\:shadow:hover {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .sm\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .sm\:hover\:shadow-lg:hover {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .sm\:hover\:shadow-xl:hover {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .sm\:hover\:shadow-2xl:hover {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .sm\:hover\:shadow-inner:hover {
@@ -10507,15 +10547,23 @@ table {
   }
 
   .sm\:focus\:shadow:focus {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .sm\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .sm\:focus\:shadow-lg:focus {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .sm\:focus\:shadow-xl:focus {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .sm\:focus\:shadow-2xl:focus {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .sm\:focus\:shadow-inner:focus {
@@ -16129,15 +16177,23 @@ table {
   }
 
   .md\:shadow {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .md\:shadow-md {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .md\:shadow-lg {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .md\:shadow-xl {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .md\:shadow-2xl {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .md\:shadow-inner {
@@ -16153,15 +16209,23 @@ table {
   }
 
   .md\:hover\:shadow:hover {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .md\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .md\:hover\:shadow-lg:hover {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .md\:hover\:shadow-xl:hover {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .md\:hover\:shadow-2xl:hover {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .md\:hover\:shadow-inner:hover {
@@ -16177,15 +16241,23 @@ table {
   }
 
   .md\:focus\:shadow:focus {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .md\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .md\:focus\:shadow-lg:focus {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .md\:focus\:shadow-xl:focus {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .md\:focus\:shadow-2xl:focus {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .md\:focus\:shadow-inner:focus {
@@ -21799,15 +21871,23 @@ table {
   }
 
   .lg\:shadow {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .lg\:shadow-md {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .lg\:shadow-lg {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .lg\:shadow-xl {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .lg\:shadow-2xl {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .lg\:shadow-inner {
@@ -21823,15 +21903,23 @@ table {
   }
 
   .lg\:hover\:shadow:hover {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .lg\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .lg\:hover\:shadow-lg:hover {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .lg\:hover\:shadow-xl:hover {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .lg\:hover\:shadow-2xl:hover {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .lg\:hover\:shadow-inner:hover {
@@ -21847,15 +21935,23 @@ table {
   }
 
   .lg\:focus\:shadow:focus {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .lg\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .lg\:focus\:shadow-lg:focus {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .lg\:focus\:shadow-xl:focus {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .lg\:focus\:shadow-2xl:focus {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .lg\:focus\:shadow-inner:focus {
@@ -27469,15 +27565,23 @@ table {
   }
 
   .xl\:shadow {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .xl\:shadow-md {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .xl\:shadow-lg {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .xl\:shadow-xl {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .xl\:shadow-2xl {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .xl\:shadow-inner {
@@ -27493,15 +27597,23 @@ table {
   }
 
   .xl\:hover\:shadow:hover {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .xl\:hover\:shadow-xl:hover {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .xl\:hover\:shadow-2xl:hover {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .xl\:hover\:shadow-inner:hover {
@@ -27517,15 +27629,23 @@ table {
   }
 
   .xl\:focus\:shadow:focus {
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   }
 
   .xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
   }
 
   .xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  }
+
+  .xl\:focus\:shadow-xl:focus {
+    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  }
+
+  .xl\:focus\:shadow-2xl:focus {
+    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
   }
 
   .xl\:focus\:shadow-inner:focus {
diff --git a/defaultTheme.js b/defaultTheme.js
index a29cb3f3a662..41ad19f61239 100644
--- a/defaultTheme.js
+++ b/defaultTheme.js
@@ -285,11 +285,11 @@ module.exports = function() {
       top: 'top',
     },
     boxShadow: {
-      default: '0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.06)',
-      md: '0 3px 6px 0 rgba(0,0,0,0.10), 0 2px 4px 0 rgba(0,0,0,0.06)',
-      lg: '0 10px 20px 0 rgba(0,0,0,0.10), 0 3px 6px 0 rgba(0,0,0,0.06)',
-      xl: '0 15px 25px 0 rgba(0,0,0,0.10), 0 5px 10px 0 rgba(0,0,0,0.04)',
-      '2xl': '0 20px 40px 0 rgba(0,0,0,0.20)',
+      default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)',
+      md: '0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06)',
+      lg: '0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06)',
+      xl: '0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04)',
+      '2xl': '0 20px 40px 0 rgba(0, 0, 0, .2)',
       inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
       outline: '0 0 0 3px rgba(52,144,220,0.5)',
       none: 'none',

From 92d3bcfa6a988394226c5f0dec21245bb39efb63 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 28 Feb 2019 07:46:26 -0500
Subject: [PATCH 3/3] Update shadows to incorporate progressive negative spread

---
 .../fixtures/tailwind-output-important.css    | 120 +++++++++---------
 __tests__/fixtures/tailwind-output.css        | 120 +++++++++---------
 defaultTheme.js                               |   8 +-
 3 files changed, 124 insertions(+), 124 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index fbd12ada825e..405622f66213 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -4786,19 +4786,19 @@ table {
 }
 
 .shadow-md {
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
 }
 
 .shadow-xl {
-  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
 }
 
 .shadow-2xl {
-  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
 }
 
 .shadow-inner {
@@ -4818,19 +4818,19 @@ table {
 }
 
 .hover\:shadow-md:hover {
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
 }
 
 .hover\:shadow-lg:hover {
-  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
 }
 
 .hover\:shadow-xl:hover {
-  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
 }
 
 .hover\:shadow-2xl:hover {
-  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
 }
 
 .hover\:shadow-inner:hover {
@@ -4850,19 +4850,19 @@ table {
 }
 
 .focus\:shadow-md:focus {
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
 }
 
 .focus\:shadow-lg:focus {
-  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
 }
 
 .focus\:shadow-xl:focus {
-  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
 }
 
 .focus\:shadow-2xl:focus {
-  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
 }
 
 .focus\:shadow-inner:focus {
@@ -10487,19 +10487,19 @@ table {
   }
 
   .sm\:shadow-md {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .sm\:shadow-lg {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .sm\:shadow-xl {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .sm\:shadow-2xl {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .sm\:shadow-inner {
@@ -10519,19 +10519,19 @@ table {
   }
 
   .sm\:hover\:shadow-md:hover {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .sm\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .sm\:hover\:shadow-xl:hover {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .sm\:hover\:shadow-2xl:hover {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .sm\:hover\:shadow-inner:hover {
@@ -10551,19 +10551,19 @@ table {
   }
 
   .sm\:focus\:shadow-md:focus {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .sm\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .sm\:focus\:shadow-xl:focus {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .sm\:focus\:shadow-2xl:focus {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .sm\:focus\:shadow-inner:focus {
@@ -16181,19 +16181,19 @@ table {
   }
 
   .md\:shadow-md {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .md\:shadow-lg {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .md\:shadow-xl {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .md\:shadow-2xl {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .md\:shadow-inner {
@@ -16213,19 +16213,19 @@ table {
   }
 
   .md\:hover\:shadow-md:hover {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .md\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .md\:hover\:shadow-xl:hover {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .md\:hover\:shadow-2xl:hover {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .md\:hover\:shadow-inner:hover {
@@ -16245,19 +16245,19 @@ table {
   }
 
   .md\:focus\:shadow-md:focus {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .md\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .md\:focus\:shadow-xl:focus {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .md\:focus\:shadow-2xl:focus {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .md\:focus\:shadow-inner:focus {
@@ -21875,19 +21875,19 @@ table {
   }
 
   .lg\:shadow-md {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .lg\:shadow-lg {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .lg\:shadow-xl {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .lg\:shadow-2xl {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .lg\:shadow-inner {
@@ -21907,19 +21907,19 @@ table {
   }
 
   .lg\:hover\:shadow-md:hover {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .lg\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .lg\:hover\:shadow-xl:hover {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .lg\:hover\:shadow-2xl:hover {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .lg\:hover\:shadow-inner:hover {
@@ -21939,19 +21939,19 @@ table {
   }
 
   .lg\:focus\:shadow-md:focus {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .lg\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .lg\:focus\:shadow-xl:focus {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .lg\:focus\:shadow-2xl:focus {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .lg\:focus\:shadow-inner:focus {
@@ -27569,19 +27569,19 @@ table {
   }
 
   .xl\:shadow-md {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .xl\:shadow-lg {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .xl\:shadow-xl {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .xl\:shadow-2xl {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .xl\:shadow-inner {
@@ -27601,19 +27601,19 @@ table {
   }
 
   .xl\:hover\:shadow-md:hover {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .xl\:hover\:shadow-inner:hover {
@@ -27633,19 +27633,19 @@ table {
   }
 
   .xl\:focus\:shadow-md:focus {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
   }
 
   .xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06) !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
   }
 
   .xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04) !important;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
   }
 
   .xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2) !important;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
   }
 
   .xl\:focus\:shadow-inner:focus {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index acc1c6c5f911..6159a1347809 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -4786,19 +4786,19 @@ table {
 }
 
 .shadow-md {
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
 }
 
 .shadow-lg {
-  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
 }
 
 .shadow-xl {
-  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
 }
 
 .shadow-2xl {
-  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
 }
 
 .shadow-inner {
@@ -4818,19 +4818,19 @@ table {
 }
 
 .hover\:shadow-md:hover {
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
 }
 
 .hover\:shadow-lg:hover {
-  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
 }
 
 .hover\:shadow-xl:hover {
-  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
 }
 
 .hover\:shadow-2xl:hover {
-  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
 }
 
 .hover\:shadow-inner:hover {
@@ -4850,19 +4850,19 @@ table {
 }
 
 .focus\:shadow-md:focus {
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
 }
 
 .focus\:shadow-lg:focus {
-  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
 }
 
 .focus\:shadow-xl:focus {
-  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
 }
 
 .focus\:shadow-2xl:focus {
-  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
 }
 
 .focus\:shadow-inner:focus {
@@ -10487,19 +10487,19 @@ table {
   }
 
   .sm\:shadow-md {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .sm\:shadow-lg {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .sm\:shadow-xl {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .sm\:shadow-2xl {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .sm\:shadow-inner {
@@ -10519,19 +10519,19 @@ table {
   }
 
   .sm\:hover\:shadow-md:hover {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .sm\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .sm\:hover\:shadow-xl:hover {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .sm\:hover\:shadow-2xl:hover {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .sm\:hover\:shadow-inner:hover {
@@ -10551,19 +10551,19 @@ table {
   }
 
   .sm\:focus\:shadow-md:focus {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .sm\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .sm\:focus\:shadow-xl:focus {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .sm\:focus\:shadow-2xl:focus {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .sm\:focus\:shadow-inner:focus {
@@ -16181,19 +16181,19 @@ table {
   }
 
   .md\:shadow-md {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .md\:shadow-lg {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .md\:shadow-xl {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .md\:shadow-2xl {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .md\:shadow-inner {
@@ -16213,19 +16213,19 @@ table {
   }
 
   .md\:hover\:shadow-md:hover {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .md\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .md\:hover\:shadow-xl:hover {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .md\:hover\:shadow-2xl:hover {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .md\:hover\:shadow-inner:hover {
@@ -16245,19 +16245,19 @@ table {
   }
 
   .md\:focus\:shadow-md:focus {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .md\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .md\:focus\:shadow-xl:focus {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .md\:focus\:shadow-2xl:focus {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .md\:focus\:shadow-inner:focus {
@@ -21875,19 +21875,19 @@ table {
   }
 
   .lg\:shadow-md {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .lg\:shadow-lg {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .lg\:shadow-xl {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .lg\:shadow-2xl {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .lg\:shadow-inner {
@@ -21907,19 +21907,19 @@ table {
   }
 
   .lg\:hover\:shadow-md:hover {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .lg\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .lg\:hover\:shadow-xl:hover {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .lg\:hover\:shadow-2xl:hover {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .lg\:hover\:shadow-inner:hover {
@@ -21939,19 +21939,19 @@ table {
   }
 
   .lg\:focus\:shadow-md:focus {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .lg\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .lg\:focus\:shadow-xl:focus {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .lg\:focus\:shadow-2xl:focus {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .lg\:focus\:shadow-inner:focus {
@@ -27569,19 +27569,19 @@ table {
   }
 
   .xl\:shadow-md {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .xl\:shadow-lg {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .xl\:shadow-xl {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .xl\:shadow-2xl {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .xl\:shadow-inner {
@@ -27601,19 +27601,19 @@ table {
   }
 
   .xl\:hover\:shadow-md:hover {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .xl\:hover\:shadow-inner:hover {
@@ -27633,19 +27633,19 @@ table {
   }
 
   .xl\:focus\:shadow-md:focus {
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
   }
 
   .xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   }
 
   .xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
   }
 
   .xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
   }
 
   .xl\:focus\:shadow-inner:focus {
diff --git a/defaultTheme.js b/defaultTheme.js
index 41ad19f61239..26ea7de2342b 100644
--- a/defaultTheme.js
+++ b/defaultTheme.js
@@ -286,10 +286,10 @@ module.exports = function() {
     },
     boxShadow: {
       default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)',
-      md: '0 3px 6px 0 rgba(0, 0, 0, .1), 0 2px 4px 0 rgba(0, 0, 0, .06)',
-      lg: '0 10px 20px 0 rgba(0, 0, 0, .1), 0 3px 6px 0 rgba(0, 0, 0, .06)',
-      xl: '0 15px 25px 0 rgba(0, 0, 0, .1), 0 5px 10px 0 rgba(0, 0, 0, .04)',
-      '2xl': '0 20px 40px 0 rgba(0, 0, 0, .2)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, .25)',
       inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
       outline: '0 0 0 3px rgba(52,144,220,0.5)',
       none: 'none',