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] 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 fbd12ada8..405622f66 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 acc1c6c5f..6159a1347 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 41ad19f61..26ea7de23 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',