diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 74bfe8457..182596bd1 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -532,7 +532,7 @@ ul {
 *::after {
   border-width: 0;
   border-style: solid;
-  border-color: #dae4e9;
+  border-color: #dae1e7;
 }
 
 /**
@@ -628,35 +628,35 @@ button,
 }
 
 .bg-black {
-  background-color: #222b2f;
+  background-color: #22292f;
 }
 
 .bg-grey-darkest {
-  background-color: #364349;
+  background-color: #3d4852;
 }
 
 .bg-grey-darker {
-  background-color: #596a73;
+  background-color: #606f7b;
 }
 
 .bg-grey-dark {
-  background-color: #70818a;
+  background-color: #8795a1;
 }
 
 .bg-grey {
-  background-color: #9babb4;
+  background-color: #b8c2cc;
 }
 
 .bg-grey-light {
-  background-color: #dae4e9;
+  background-color: #dae1e7;
 }
 
 .bg-grey-lighter {
-  background-color: #f3f7f9;
+  background-color: #f1f5f8;
 }
 
 .bg-grey-lightest {
-  background-color: #fafcfc;
+  background-color: #f8fafc;
 }
 
 .bg-white {
@@ -920,35 +920,35 @@ button,
 }
 
 .hover\:bg-black:hover {
-  background-color: #222b2f;
+  background-color: #22292f;
 }
 
 .hover\:bg-grey-darkest:hover {
-  background-color: #364349;
+  background-color: #3d4852;
 }
 
 .hover\:bg-grey-darker:hover {
-  background-color: #596a73;
+  background-color: #606f7b;
 }
 
 .hover\:bg-grey-dark:hover {
-  background-color: #70818a;
+  background-color: #8795a1;
 }
 
 .hover\:bg-grey:hover {
-  background-color: #9babb4;
+  background-color: #b8c2cc;
 }
 
 .hover\:bg-grey-light:hover {
-  background-color: #dae4e9;
+  background-color: #dae1e7;
 }
 
 .hover\:bg-grey-lighter:hover {
-  background-color: #f3f7f9;
+  background-color: #f1f5f8;
 }
 
 .hover\:bg-grey-lightest:hover {
-  background-color: #fafcfc;
+  background-color: #f8fafc;
 }
 
 .hover\:bg-white:hover {
@@ -1272,35 +1272,35 @@ button,
 }
 
 .border-black {
-  border-color: #222b2f;
+  border-color: #22292f;
 }
 
 .border-grey-darkest {
-  border-color: #364349;
+  border-color: #3d4852;
 }
 
 .border-grey-darker {
-  border-color: #596a73;
+  border-color: #606f7b;
 }
 
 .border-grey-dark {
-  border-color: #70818a;
+  border-color: #8795a1;
 }
 
 .border-grey {
-  border-color: #9babb4;
+  border-color: #b8c2cc;
 }
 
 .border-grey-light {
-  border-color: #dae4e9;
+  border-color: #dae1e7;
 }
 
 .border-grey-lighter {
-  border-color: #f3f7f9;
+  border-color: #f1f5f8;
 }
 
 .border-grey-lightest {
-  border-color: #fafcfc;
+  border-color: #f8fafc;
 }
 
 .border-white {
@@ -1564,35 +1564,35 @@ button,
 }
 
 .hover\:border-black:hover {
-  border-color: #222b2f;
+  border-color: #22292f;
 }
 
 .hover\:border-grey-darkest:hover {
-  border-color: #364349;
+  border-color: #3d4852;
 }
 
 .hover\:border-grey-darker:hover {
-  border-color: #596a73;
+  border-color: #606f7b;
 }
 
 .hover\:border-grey-dark:hover {
-  border-color: #70818a;
+  border-color: #8795a1;
 }
 
 .hover\:border-grey:hover {
-  border-color: #9babb4;
+  border-color: #b8c2cc;
 }
 
 .hover\:border-grey-light:hover {
-  border-color: #dae4e9;
+  border-color: #dae1e7;
 }
 
 .hover\:border-grey-lighter:hover {
-  border-color: #f3f7f9;
+  border-color: #f1f5f8;
 }
 
 .hover\:border-grey-lightest:hover {
-  border-color: #fafcfc;
+  border-color: #f8fafc;
 }
 
 .hover\:border-white:hover {
@@ -3546,35 +3546,35 @@ button,
 }
 
 .text-black {
-  color: #222b2f;
+  color: #22292f;
 }
 
 .text-grey-darkest {
-  color: #364349;
+  color: #3d4852;
 }
 
 .text-grey-darker {
-  color: #596a73;
+  color: #606f7b;
 }
 
 .text-grey-dark {
-  color: #70818a;
+  color: #8795a1;
 }
 
 .text-grey {
-  color: #9babb4;
+  color: #b8c2cc;
 }
 
 .text-grey-light {
-  color: #dae4e9;
+  color: #dae1e7;
 }
 
 .text-grey-lighter {
-  color: #f3f7f9;
+  color: #f1f5f8;
 }
 
 .text-grey-lightest {
-  color: #fafcfc;
+  color: #f8fafc;
 }
 
 .text-white {
@@ -3838,35 +3838,35 @@ button,
 }
 
 .hover\:text-black:hover {
-  color: #222b2f;
+  color: #22292f;
 }
 
 .hover\:text-grey-darkest:hover {
-  color: #364349;
+  color: #3d4852;
 }
 
 .hover\:text-grey-darker:hover {
-  color: #596a73;
+  color: #606f7b;
 }
 
 .hover\:text-grey-dark:hover {
-  color: #70818a;
+  color: #8795a1;
 }
 
 .hover\:text-grey:hover {
-  color: #9babb4;
+  color: #b8c2cc;
 }
 
 .hover\:text-grey-light:hover {
-  color: #dae4e9;
+  color: #dae1e7;
 }
 
 .hover\:text-grey-lighter:hover {
-  color: #f3f7f9;
+  color: #f1f5f8;
 }
 
 .hover\:text-grey-lightest:hover {
-  color: #fafcfc;
+  color: #f8fafc;
 }
 
 .hover\:text-white:hover {
@@ -4511,35 +4511,35 @@ button,
   }
 
   .sm\:bg-black {
-    background-color: #222b2f;
+    background-color: #22292f;
   }
 
   .sm\:bg-grey-darkest {
-    background-color: #364349;
+    background-color: #3d4852;
   }
 
   .sm\:bg-grey-darker {
-    background-color: #596a73;
+    background-color: #606f7b;
   }
 
   .sm\:bg-grey-dark {
-    background-color: #70818a;
+    background-color: #8795a1;
   }
 
   .sm\:bg-grey {
-    background-color: #9babb4;
+    background-color: #b8c2cc;
   }
 
   .sm\:bg-grey-light {
-    background-color: #dae4e9;
+    background-color: #dae1e7;
   }
 
   .sm\:bg-grey-lighter {
-    background-color: #f3f7f9;
+    background-color: #f1f5f8;
   }
 
   .sm\:bg-grey-lightest {
-    background-color: #fafcfc;
+    background-color: #f8fafc;
   }
 
   .sm\:bg-white {
@@ -4803,35 +4803,35 @@ button,
   }
 
   .sm\:hover\:bg-black:hover {
-    background-color: #222b2f;
+    background-color: #22292f;
   }
 
   .sm\:hover\:bg-grey-darkest:hover {
-    background-color: #364349;
+    background-color: #3d4852;
   }
 
   .sm\:hover\:bg-grey-darker:hover {
-    background-color: #596a73;
+    background-color: #606f7b;
   }
 
   .sm\:hover\:bg-grey-dark:hover {
-    background-color: #70818a;
+    background-color: #8795a1;
   }
 
   .sm\:hover\:bg-grey:hover {
-    background-color: #9babb4;
+    background-color: #b8c2cc;
   }
 
   .sm\:hover\:bg-grey-light:hover {
-    background-color: #dae4e9;
+    background-color: #dae1e7;
   }
 
   .sm\:hover\:bg-grey-lighter:hover {
-    background-color: #f3f7f9;
+    background-color: #f1f5f8;
   }
 
   .sm\:hover\:bg-grey-lightest:hover {
-    background-color: #fafcfc;
+    background-color: #f8fafc;
   }
 
   .sm\:hover\:bg-white:hover {
@@ -5155,35 +5155,35 @@ button,
   }
 
   .sm\:border-black {
-    border-color: #222b2f;
+    border-color: #22292f;
   }
 
   .sm\:border-grey-darkest {
-    border-color: #364349;
+    border-color: #3d4852;
   }
 
   .sm\:border-grey-darker {
-    border-color: #596a73;
+    border-color: #606f7b;
   }
 
   .sm\:border-grey-dark {
-    border-color: #70818a;
+    border-color: #8795a1;
   }
 
   .sm\:border-grey {
-    border-color: #9babb4;
+    border-color: #b8c2cc;
   }
 
   .sm\:border-grey-light {
-    border-color: #dae4e9;
+    border-color: #dae1e7;
   }
 
   .sm\:border-grey-lighter {
-    border-color: #f3f7f9;
+    border-color: #f1f5f8;
   }
 
   .sm\:border-grey-lightest {
-    border-color: #fafcfc;
+    border-color: #f8fafc;
   }
 
   .sm\:border-white {
@@ -5447,35 +5447,35 @@ button,
   }
 
   .sm\:hover\:border-black:hover {
-    border-color: #222b2f;
+    border-color: #22292f;
   }
 
   .sm\:hover\:border-grey-darkest:hover {
-    border-color: #364349;
+    border-color: #3d4852;
   }
 
   .sm\:hover\:border-grey-darker:hover {
-    border-color: #596a73;
+    border-color: #606f7b;
   }
 
   .sm\:hover\:border-grey-dark:hover {
-    border-color: #70818a;
+    border-color: #8795a1;
   }
 
   .sm\:hover\:border-grey:hover {
-    border-color: #9babb4;
+    border-color: #b8c2cc;
   }
 
   .sm\:hover\:border-grey-light:hover {
-    border-color: #dae4e9;
+    border-color: #dae1e7;
   }
 
   .sm\:hover\:border-grey-lighter:hover {
-    border-color: #f3f7f9;
+    border-color: #f1f5f8;
   }
 
   .sm\:hover\:border-grey-lightest:hover {
-    border-color: #fafcfc;
+    border-color: #f8fafc;
   }
 
   .sm\:hover\:border-white:hover {
@@ -7421,35 +7421,35 @@ button,
   }
 
   .sm\:text-black {
-    color: #222b2f;
+    color: #22292f;
   }
 
   .sm\:text-grey-darkest {
-    color: #364349;
+    color: #3d4852;
   }
 
   .sm\:text-grey-darker {
-    color: #596a73;
+    color: #606f7b;
   }
 
   .sm\:text-grey-dark {
-    color: #70818a;
+    color: #8795a1;
   }
 
   .sm\:text-grey {
-    color: #9babb4;
+    color: #b8c2cc;
   }
 
   .sm\:text-grey-light {
-    color: #dae4e9;
+    color: #dae1e7;
   }
 
   .sm\:text-grey-lighter {
-    color: #f3f7f9;
+    color: #f1f5f8;
   }
 
   .sm\:text-grey-lightest {
-    color: #fafcfc;
+    color: #f8fafc;
   }
 
   .sm\:text-white {
@@ -7713,35 +7713,35 @@ button,
   }
 
   .sm\:hover\:text-black:hover {
-    color: #222b2f;
+    color: #22292f;
   }
 
   .sm\:hover\:text-grey-darkest:hover {
-    color: #364349;
+    color: #3d4852;
   }
 
   .sm\:hover\:text-grey-darker:hover {
-    color: #596a73;
+    color: #606f7b;
   }
 
   .sm\:hover\:text-grey-dark:hover {
-    color: #70818a;
+    color: #8795a1;
   }
 
   .sm\:hover\:text-grey:hover {
-    color: #9babb4;
+    color: #b8c2cc;
   }
 
   .sm\:hover\:text-grey-light:hover {
-    color: #dae4e9;
+    color: #dae1e7;
   }
 
   .sm\:hover\:text-grey-lighter:hover {
-    color: #f3f7f9;
+    color: #f1f5f8;
   }
 
   .sm\:hover\:text-grey-lightest:hover {
-    color: #fafcfc;
+    color: #f8fafc;
   }
 
   .sm\:hover\:text-white:hover {
@@ -8387,35 +8387,35 @@ button,
   }
 
   .md\:bg-black {
-    background-color: #222b2f;
+    background-color: #22292f;
   }
 
   .md\:bg-grey-darkest {
-    background-color: #364349;
+    background-color: #3d4852;
   }
 
   .md\:bg-grey-darker {
-    background-color: #596a73;
+    background-color: #606f7b;
   }
 
   .md\:bg-grey-dark {
-    background-color: #70818a;
+    background-color: #8795a1;
   }
 
   .md\:bg-grey {
-    background-color: #9babb4;
+    background-color: #b8c2cc;
   }
 
   .md\:bg-grey-light {
-    background-color: #dae4e9;
+    background-color: #dae1e7;
   }
 
   .md\:bg-grey-lighter {
-    background-color: #f3f7f9;
+    background-color: #f1f5f8;
   }
 
   .md\:bg-grey-lightest {
-    background-color: #fafcfc;
+    background-color: #f8fafc;
   }
 
   .md\:bg-white {
@@ -8679,35 +8679,35 @@ button,
   }
 
   .md\:hover\:bg-black:hover {
-    background-color: #222b2f;
+    background-color: #22292f;
   }
 
   .md\:hover\:bg-grey-darkest:hover {
-    background-color: #364349;
+    background-color: #3d4852;
   }
 
   .md\:hover\:bg-grey-darker:hover {
-    background-color: #596a73;
+    background-color: #606f7b;
   }
 
   .md\:hover\:bg-grey-dark:hover {
-    background-color: #70818a;
+    background-color: #8795a1;
   }
 
   .md\:hover\:bg-grey:hover {
-    background-color: #9babb4;
+    background-color: #b8c2cc;
   }
 
   .md\:hover\:bg-grey-light:hover {
-    background-color: #dae4e9;
+    background-color: #dae1e7;
   }
 
   .md\:hover\:bg-grey-lighter:hover {
-    background-color: #f3f7f9;
+    background-color: #f1f5f8;
   }
 
   .md\:hover\:bg-grey-lightest:hover {
-    background-color: #fafcfc;
+    background-color: #f8fafc;
   }
 
   .md\:hover\:bg-white:hover {
@@ -9031,35 +9031,35 @@ button,
   }
 
   .md\:border-black {
-    border-color: #222b2f;
+    border-color: #22292f;
   }
 
   .md\:border-grey-darkest {
-    border-color: #364349;
+    border-color: #3d4852;
   }
 
   .md\:border-grey-darker {
-    border-color: #596a73;
+    border-color: #606f7b;
   }
 
   .md\:border-grey-dark {
-    border-color: #70818a;
+    border-color: #8795a1;
   }
 
   .md\:border-grey {
-    border-color: #9babb4;
+    border-color: #b8c2cc;
   }
 
   .md\:border-grey-light {
-    border-color: #dae4e9;
+    border-color: #dae1e7;
   }
 
   .md\:border-grey-lighter {
-    border-color: #f3f7f9;
+    border-color: #f1f5f8;
   }
 
   .md\:border-grey-lightest {
-    border-color: #fafcfc;
+    border-color: #f8fafc;
   }
 
   .md\:border-white {
@@ -9323,35 +9323,35 @@ button,
   }
 
   .md\:hover\:border-black:hover {
-    border-color: #222b2f;
+    border-color: #22292f;
   }
 
   .md\:hover\:border-grey-darkest:hover {
-    border-color: #364349;
+    border-color: #3d4852;
   }
 
   .md\:hover\:border-grey-darker:hover {
-    border-color: #596a73;
+    border-color: #606f7b;
   }
 
   .md\:hover\:border-grey-dark:hover {
-    border-color: #70818a;
+    border-color: #8795a1;
   }
 
   .md\:hover\:border-grey:hover {
-    border-color: #9babb4;
+    border-color: #b8c2cc;
   }
 
   .md\:hover\:border-grey-light:hover {
-    border-color: #dae4e9;
+    border-color: #dae1e7;
   }
 
   .md\:hover\:border-grey-lighter:hover {
-    border-color: #f3f7f9;
+    border-color: #f1f5f8;
   }
 
   .md\:hover\:border-grey-lightest:hover {
-    border-color: #fafcfc;
+    border-color: #f8fafc;
   }
 
   .md\:hover\:border-white:hover {
@@ -11297,35 +11297,35 @@ button,
   }
 
   .md\:text-black {
-    color: #222b2f;
+    color: #22292f;
   }
 
   .md\:text-grey-darkest {
-    color: #364349;
+    color: #3d4852;
   }
 
   .md\:text-grey-darker {
-    color: #596a73;
+    color: #606f7b;
   }
 
   .md\:text-grey-dark {
-    color: #70818a;
+    color: #8795a1;
   }
 
   .md\:text-grey {
-    color: #9babb4;
+    color: #b8c2cc;
   }
 
   .md\:text-grey-light {
-    color: #dae4e9;
+    color: #dae1e7;
   }
 
   .md\:text-grey-lighter {
-    color: #f3f7f9;
+    color: #f1f5f8;
   }
 
   .md\:text-grey-lightest {
-    color: #fafcfc;
+    color: #f8fafc;
   }
 
   .md\:text-white {
@@ -11589,35 +11589,35 @@ button,
   }
 
   .md\:hover\:text-black:hover {
-    color: #222b2f;
+    color: #22292f;
   }
 
   .md\:hover\:text-grey-darkest:hover {
-    color: #364349;
+    color: #3d4852;
   }
 
   .md\:hover\:text-grey-darker:hover {
-    color: #596a73;
+    color: #606f7b;
   }
 
   .md\:hover\:text-grey-dark:hover {
-    color: #70818a;
+    color: #8795a1;
   }
 
   .md\:hover\:text-grey:hover {
-    color: #9babb4;
+    color: #b8c2cc;
   }
 
   .md\:hover\:text-grey-light:hover {
-    color: #dae4e9;
+    color: #dae1e7;
   }
 
   .md\:hover\:text-grey-lighter:hover {
-    color: #f3f7f9;
+    color: #f1f5f8;
   }
 
   .md\:hover\:text-grey-lightest:hover {
-    color: #fafcfc;
+    color: #f8fafc;
   }
 
   .md\:hover\:text-white:hover {
@@ -12263,35 +12263,35 @@ button,
   }
 
   .lg\:bg-black {
-    background-color: #222b2f;
+    background-color: #22292f;
   }
 
   .lg\:bg-grey-darkest {
-    background-color: #364349;
+    background-color: #3d4852;
   }
 
   .lg\:bg-grey-darker {
-    background-color: #596a73;
+    background-color: #606f7b;
   }
 
   .lg\:bg-grey-dark {
-    background-color: #70818a;
+    background-color: #8795a1;
   }
 
   .lg\:bg-grey {
-    background-color: #9babb4;
+    background-color: #b8c2cc;
   }
 
   .lg\:bg-grey-light {
-    background-color: #dae4e9;
+    background-color: #dae1e7;
   }
 
   .lg\:bg-grey-lighter {
-    background-color: #f3f7f9;
+    background-color: #f1f5f8;
   }
 
   .lg\:bg-grey-lightest {
-    background-color: #fafcfc;
+    background-color: #f8fafc;
   }
 
   .lg\:bg-white {
@@ -12555,35 +12555,35 @@ button,
   }
 
   .lg\:hover\:bg-black:hover {
-    background-color: #222b2f;
+    background-color: #22292f;
   }
 
   .lg\:hover\:bg-grey-darkest:hover {
-    background-color: #364349;
+    background-color: #3d4852;
   }
 
   .lg\:hover\:bg-grey-darker:hover {
-    background-color: #596a73;
+    background-color: #606f7b;
   }
 
   .lg\:hover\:bg-grey-dark:hover {
-    background-color: #70818a;
+    background-color: #8795a1;
   }
 
   .lg\:hover\:bg-grey:hover {
-    background-color: #9babb4;
+    background-color: #b8c2cc;
   }
 
   .lg\:hover\:bg-grey-light:hover {
-    background-color: #dae4e9;
+    background-color: #dae1e7;
   }
 
   .lg\:hover\:bg-grey-lighter:hover {
-    background-color: #f3f7f9;
+    background-color: #f1f5f8;
   }
 
   .lg\:hover\:bg-grey-lightest:hover {
-    background-color: #fafcfc;
+    background-color: #f8fafc;
   }
 
   .lg\:hover\:bg-white:hover {
@@ -12907,35 +12907,35 @@ button,
   }
 
   .lg\:border-black {
-    border-color: #222b2f;
+    border-color: #22292f;
   }
 
   .lg\:border-grey-darkest {
-    border-color: #364349;
+    border-color: #3d4852;
   }
 
   .lg\:border-grey-darker {
-    border-color: #596a73;
+    border-color: #606f7b;
   }
 
   .lg\:border-grey-dark {
-    border-color: #70818a;
+    border-color: #8795a1;
   }
 
   .lg\:border-grey {
-    border-color: #9babb4;
+    border-color: #b8c2cc;
   }
 
   .lg\:border-grey-light {
-    border-color: #dae4e9;
+    border-color: #dae1e7;
   }
 
   .lg\:border-grey-lighter {
-    border-color: #f3f7f9;
+    border-color: #f1f5f8;
   }
 
   .lg\:border-grey-lightest {
-    border-color: #fafcfc;
+    border-color: #f8fafc;
   }
 
   .lg\:border-white {
@@ -13199,35 +13199,35 @@ button,
   }
 
   .lg\:hover\:border-black:hover {
-    border-color: #222b2f;
+    border-color: #22292f;
   }
 
   .lg\:hover\:border-grey-darkest:hover {
-    border-color: #364349;
+    border-color: #3d4852;
   }
 
   .lg\:hover\:border-grey-darker:hover {
-    border-color: #596a73;
+    border-color: #606f7b;
   }
 
   .lg\:hover\:border-grey-dark:hover {
-    border-color: #70818a;
+    border-color: #8795a1;
   }
 
   .lg\:hover\:border-grey:hover {
-    border-color: #9babb4;
+    border-color: #b8c2cc;
   }
 
   .lg\:hover\:border-grey-light:hover {
-    border-color: #dae4e9;
+    border-color: #dae1e7;
   }
 
   .lg\:hover\:border-grey-lighter:hover {
-    border-color: #f3f7f9;
+    border-color: #f1f5f8;
   }
 
   .lg\:hover\:border-grey-lightest:hover {
-    border-color: #fafcfc;
+    border-color: #f8fafc;
   }
 
   .lg\:hover\:border-white:hover {
@@ -15173,35 +15173,35 @@ button,
   }
 
   .lg\:text-black {
-    color: #222b2f;
+    color: #22292f;
   }
 
   .lg\:text-grey-darkest {
-    color: #364349;
+    color: #3d4852;
   }
 
   .lg\:text-grey-darker {
-    color: #596a73;
+    color: #606f7b;
   }
 
   .lg\:text-grey-dark {
-    color: #70818a;
+    color: #8795a1;
   }
 
   .lg\:text-grey {
-    color: #9babb4;
+    color: #b8c2cc;
   }
 
   .lg\:text-grey-light {
-    color: #dae4e9;
+    color: #dae1e7;
   }
 
   .lg\:text-grey-lighter {
-    color: #f3f7f9;
+    color: #f1f5f8;
   }
 
   .lg\:text-grey-lightest {
-    color: #fafcfc;
+    color: #f8fafc;
   }
 
   .lg\:text-white {
@@ -15465,35 +15465,35 @@ button,
   }
 
   .lg\:hover\:text-black:hover {
-    color: #222b2f;
+    color: #22292f;
   }
 
   .lg\:hover\:text-grey-darkest:hover {
-    color: #364349;
+    color: #3d4852;
   }
 
   .lg\:hover\:text-grey-darker:hover {
-    color: #596a73;
+    color: #606f7b;
   }
 
   .lg\:hover\:text-grey-dark:hover {
-    color: #70818a;
+    color: #8795a1;
   }
 
   .lg\:hover\:text-grey:hover {
-    color: #9babb4;
+    color: #b8c2cc;
   }
 
   .lg\:hover\:text-grey-light:hover {
-    color: #dae4e9;
+    color: #dae1e7;
   }
 
   .lg\:hover\:text-grey-lighter:hover {
-    color: #f3f7f9;
+    color: #f1f5f8;
   }
 
   .lg\:hover\:text-grey-lightest:hover {
-    color: #fafcfc;
+    color: #f8fafc;
   }
 
   .lg\:hover\:text-white:hover {
@@ -16139,35 +16139,35 @@ button,
   }
 
   .xl\:bg-black {
-    background-color: #222b2f;
+    background-color: #22292f;
   }
 
   .xl\:bg-grey-darkest {
-    background-color: #364349;
+    background-color: #3d4852;
   }
 
   .xl\:bg-grey-darker {
-    background-color: #596a73;
+    background-color: #606f7b;
   }
 
   .xl\:bg-grey-dark {
-    background-color: #70818a;
+    background-color: #8795a1;
   }
 
   .xl\:bg-grey {
-    background-color: #9babb4;
+    background-color: #b8c2cc;
   }
 
   .xl\:bg-grey-light {
-    background-color: #dae4e9;
+    background-color: #dae1e7;
   }
 
   .xl\:bg-grey-lighter {
-    background-color: #f3f7f9;
+    background-color: #f1f5f8;
   }
 
   .xl\:bg-grey-lightest {
-    background-color: #fafcfc;
+    background-color: #f8fafc;
   }
 
   .xl\:bg-white {
@@ -16431,35 +16431,35 @@ button,
   }
 
   .xl\:hover\:bg-black:hover {
-    background-color: #222b2f;
+    background-color: #22292f;
   }
 
   .xl\:hover\:bg-grey-darkest:hover {
-    background-color: #364349;
+    background-color: #3d4852;
   }
 
   .xl\:hover\:bg-grey-darker:hover {
-    background-color: #596a73;
+    background-color: #606f7b;
   }
 
   .xl\:hover\:bg-grey-dark:hover {
-    background-color: #70818a;
+    background-color: #8795a1;
   }
 
   .xl\:hover\:bg-grey:hover {
-    background-color: #9babb4;
+    background-color: #b8c2cc;
   }
 
   .xl\:hover\:bg-grey-light:hover {
-    background-color: #dae4e9;
+    background-color: #dae1e7;
   }
 
   .xl\:hover\:bg-grey-lighter:hover {
-    background-color: #f3f7f9;
+    background-color: #f1f5f8;
   }
 
   .xl\:hover\:bg-grey-lightest:hover {
-    background-color: #fafcfc;
+    background-color: #f8fafc;
   }
 
   .xl\:hover\:bg-white:hover {
@@ -16783,35 +16783,35 @@ button,
   }
 
   .xl\:border-black {
-    border-color: #222b2f;
+    border-color: #22292f;
   }
 
   .xl\:border-grey-darkest {
-    border-color: #364349;
+    border-color: #3d4852;
   }
 
   .xl\:border-grey-darker {
-    border-color: #596a73;
+    border-color: #606f7b;
   }
 
   .xl\:border-grey-dark {
-    border-color: #70818a;
+    border-color: #8795a1;
   }
 
   .xl\:border-grey {
-    border-color: #9babb4;
+    border-color: #b8c2cc;
   }
 
   .xl\:border-grey-light {
-    border-color: #dae4e9;
+    border-color: #dae1e7;
   }
 
   .xl\:border-grey-lighter {
-    border-color: #f3f7f9;
+    border-color: #f1f5f8;
   }
 
   .xl\:border-grey-lightest {
-    border-color: #fafcfc;
+    border-color: #f8fafc;
   }
 
   .xl\:border-white {
@@ -17075,35 +17075,35 @@ button,
   }
 
   .xl\:hover\:border-black:hover {
-    border-color: #222b2f;
+    border-color: #22292f;
   }
 
   .xl\:hover\:border-grey-darkest:hover {
-    border-color: #364349;
+    border-color: #3d4852;
   }
 
   .xl\:hover\:border-grey-darker:hover {
-    border-color: #596a73;
+    border-color: #606f7b;
   }
 
   .xl\:hover\:border-grey-dark:hover {
-    border-color: #70818a;
+    border-color: #8795a1;
   }
 
   .xl\:hover\:border-grey:hover {
-    border-color: #9babb4;
+    border-color: #b8c2cc;
   }
 
   .xl\:hover\:border-grey-light:hover {
-    border-color: #dae4e9;
+    border-color: #dae1e7;
   }
 
   .xl\:hover\:border-grey-lighter:hover {
-    border-color: #f3f7f9;
+    border-color: #f1f5f8;
   }
 
   .xl\:hover\:border-grey-lightest:hover {
-    border-color: #fafcfc;
+    border-color: #f8fafc;
   }
 
   .xl\:hover\:border-white:hover {
@@ -19049,35 +19049,35 @@ button,
   }
 
   .xl\:text-black {
-    color: #222b2f;
+    color: #22292f;
   }
 
   .xl\:text-grey-darkest {
-    color: #364349;
+    color: #3d4852;
   }
 
   .xl\:text-grey-darker {
-    color: #596a73;
+    color: #606f7b;
   }
 
   .xl\:text-grey-dark {
-    color: #70818a;
+    color: #8795a1;
   }
 
   .xl\:text-grey {
-    color: #9babb4;
+    color: #b8c2cc;
   }
 
   .xl\:text-grey-light {
-    color: #dae4e9;
+    color: #dae1e7;
   }
 
   .xl\:text-grey-lighter {
-    color: #f3f7f9;
+    color: #f1f5f8;
   }
 
   .xl\:text-grey-lightest {
-    color: #fafcfc;
+    color: #f8fafc;
   }
 
   .xl\:text-white {
@@ -19341,35 +19341,35 @@ button,
   }
 
   .xl\:hover\:text-black:hover {
-    color: #222b2f;
+    color: #22292f;
   }
 
   .xl\:hover\:text-grey-darkest:hover {
-    color: #364349;
+    color: #3d4852;
   }
 
   .xl\:hover\:text-grey-darker:hover {
-    color: #596a73;
+    color: #606f7b;
   }
 
   .xl\:hover\:text-grey-dark:hover {
-    color: #70818a;
+    color: #8795a1;
   }
 
   .xl\:hover\:text-grey:hover {
-    color: #9babb4;
+    color: #b8c2cc;
   }
 
   .xl\:hover\:text-grey-light:hover {
-    color: #dae4e9;
+    color: #dae1e7;
   }
 
   .xl\:hover\:text-grey-lighter:hover {
-    color: #f3f7f9;
+    color: #f1f5f8;
   }
 
   .xl\:hover\:text-grey-lightest:hover {
-    color: #fafcfc;
+    color: #f8fafc;
   }
 
   .xl\:hover\:text-white:hover {
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index 8562e4238..2259dfb5e 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -46,14 +46,14 @@ View the full documentation at https://tailwindcss.com.
 let colors = {
   'transparent': 'transparent',
 
-  'black': '#222b2f',
-  'grey-darkest': '#364349',
-  'grey-darker': '#596a73',
-  'grey-dark': '#70818a',
-  'grey': '#9babb4',
-  'grey-light': '#dae4e9',
-  'grey-lighter': '#f3f7f9',
-  'grey-lightest': '#fafcfc',
+  'black': '#22292f',
+  'grey-darkest': '#3d4852',
+  'grey-darker': '#606f7b',
+  'grey-dark': '#8795a1',
+  'grey': '#b8c2cc',
+  'grey-light': '#dae1e7',
+  'grey-lighter': '#f1f5f8',
+  'grey-lightest': '#f8fafc',
   'white': '#ffffff',
 
   'red-darkest': '#420806',
diff --git a/docs/source/_assets/js/app.js b/docs/source/_assets/js/app.js
index d2adbcc46..dd82a04d1 100644
--- a/docs/source/_assets/js/app.js
+++ b/docs/source/_assets/js/app.js
@@ -12,7 +12,7 @@ const app = new Vue({
 })
 
 Prism.highlightAll()
-anchors.options = { placement: 'left', class: 'text-slate-light' }
+anchors.options = { placement: 'left', class: 'text-grey-dark' }
 anchors.add()
 
 // Add shortcut to search input when pressing the "/" key
diff --git a/docs/source/_assets/js/components/ResponsiveCodeSample.vue b/docs/source/_assets/js/components/ResponsiveCodeSample.vue
index 11b12757d..fbe31a1f7 100644
--- a/docs/source/_assets/js/components/ResponsiveCodeSample.vue
+++ b/docs/source/_assets/js/components/ResponsiveCodeSample.vue
@@ -1,30 +1,30 @@
 <template>
   <div>
     <div class="flex items-end justify-center mb-2 bg-white">
-      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'none' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'none'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'none' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'none'" >
         <svg :width="0.857142857142857 * 10" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 10 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z" fill-rule="evenodd"/></svg>
         <p class="text-xs">all</p>
       </span>
-      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'sm' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'sm'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'sm' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'sm'" >
         <svg :width="0.857142857142857 * 14" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 14 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 6h11A1.5 1.5 0 0 1 14 7.5v19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 26.5v-19A1.5 1.5 0 0 1 1.5 6zM1 9v16h12V9H1zm6 18.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM7 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
         <p class="text-xs">sm</p>
       </span>
-      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'md' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'md'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'md' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'md'" >
         <svg :width="0.857142857142857 * 26" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 26 28" xmlns="http://www.w3.org/2000/svg"><path d="M26 26.5a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 0 26.5v-14A1.5 1.5 0 0 1 1.5 11h23a1.5 1.5 0 0 1 1.5 1.5v14zm-3 .5V12H3v15h20zm1.5-6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-23-.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
         <p class="text-xs">md</p>
       </span>
-      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'lg' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'lg'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'lg' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'lg'" >
         <svg :width="0.857142857142857 * 38" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 38 28" xmlns="http://www.w3.org/2000/svg"><path d="M34 26h4v1c-1.333.667-2.667 1-4 1H4c-1.333 0-2.667-.333-4-1v-1h4V7.5A1.5 1.5 0 0 1 5.5 6h27A1.5 1.5 0 0 1 34 7.5V26zM6 8v18h26V8H6z" fill-rule="evenodd"/></svg>
         <p class="text-xs">lg</p>
       </span>
-      <span class="inline-block text-center cursor-pointer select-none" :class="activeScreen === 'xl' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'xl'" >
+      <span class="inline-block text-center cursor-pointer select-none" :class="activeScreen === 'xl' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'xl'" >
         <svg :width="0.857142857142857 * 36" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg"><path d="M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z"/></svg>
         <p class="text-xs">xl</p>
       </span>
     </div>
-    <div class="rounded overflow-hidden border-2 border-smoke mb-8">
-      <div class="p-4 bg-smoke-lighter border-b-2 border-smoke">
-        <div class="whitespace-pre font-mono text-slate-lighter text-sm overflow-x-scroll" v-html="highlightedCode"></div>
+    <div class="rounded overflow-hidden border-2 border-grey-light mb-8">
+      <div class="p-4 bg-grey-lightest border-b-2 border-grey-light">
+        <div class="whitespace-pre font-mono text-grey text-sm overflow-x-scroll" v-html="highlightedCode"></div>
       </div>
       <div class="bg-white p-4">
         <slot v-if="activeScreen === 'none'" name="none"></slot>
diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less
index 16242e381..55813fd91 100644
--- a/docs/source/_assets/less/markdown.less
+++ b/docs/source/_assets/less/markdown.less
@@ -5,12 +5,12 @@
     @apply .mb-6;
     @apply .pb-2;
     @apply .border-b-2;
-    @apply .border-smoke;
+    @apply .border-grey-light;
 
     .subnav-link, .subnav-link& {
       @apply .mr-6;
       @apply .leading-none;
-      @apply .text-slate-dark;
+      @apply .text-grey-darkest;
       @apply .text-sm;
     }
   }
@@ -18,7 +18,7 @@
   > hr {
     @apply .my-12;
     @apply .border-t-0 .border-r-0 .border-l-0;
-    @apply .border-b .border-smoke;
+    @apply .border-b .border-grey-light;
   }
 
   > a, > p a, a& {
@@ -30,7 +30,7 @@
 
   > p code, > ul li code, p& code& {
     @apply .inline-block;
-    @apply .bg-smoke-lighter;
+    @apply .bg-grey-lightest;
     @apply .rounded-sm;
     @apply .text-sm;
     @apply .p-1;
@@ -45,21 +45,21 @@
   > pre, pre& {
     @apply .font-mono;
     @apply .border-2;
-    @apply .border-smoke;
+    @apply .border-grey-light;
     @apply .rounded;
     font-weight: 400;
   }
 
   > blockquote, blockquote& {
     @apply .italic;
-    @apply .text-slate-dark;
+    @apply .text-grey-darkest;
     @apply .text-sm;
   }
 
   > h1, h1& {
     @apply .mb-1;
     @apply .leading-none;
-    @apply .text-slate-darker;
+    @apply .text-black;
     @apply .font-semibold;
     @apply .text-4xl;
   }
@@ -67,7 +67,7 @@
   > h2, h2& {
     @apply .mt-12;
     @apply .mb-4;
-    @apply .text-slate-darker;
+    @apply .text-black;
     @apply .leading-none;
     @apply .font-semibold;
     @apply .text-2xl;
@@ -76,7 +76,7 @@
   > h3, h3& {
     @apply .mt-12;
     @apply .mb-4;
-    @apply .text-slate-darker;
+    @apply .text-black;
     @apply .leading-none;
     @apply .font-semibold;
     @apply .text-xl;
@@ -85,7 +85,7 @@
   > h4, h4& {
     @apply .mt-8;
     @apply .mb-0;
-    @apply .text-slate-darker;
+    @apply .text-black;
     @apply .leading-none;
     @apply .font-semibold;
     @apply .text-base;
@@ -103,14 +103,14 @@
   }
 
   > p, p&, > blockquote > p {
-    @apply .text-slate-dark;
+    @apply .text-grey-darkest;
     @apply .mt-4;
     @apply .mb-4;
     line-height: 1.75;
   }
 
   > ul, > ol {
-    @apply .text-slate-dark;
+    @apply .text-grey-darkest;
     @apply .m-0;
     @apply .mb-4;
   }
@@ -125,11 +125,11 @@
 
   > li {
     @apply .my-2;
-    @apply .text-slate-dark;
+    @apply .text-grey-darkest;
   }
 
   > :not(pre):not(h1):not(h2):not(h3):not(h4) > code, > pre, pre& {
-    @apply .bg-smoke-lighter;
+    @apply .bg-grey-lightest;
     @apply .text-sm;
     @apply .leading-normal;
   }
diff --git a/docs/source/_assets/less/prism.less b/docs/source/_assets/less/prism.less
index a19790703..88fd54d40 100644
--- a/docs/source/_assets/less/prism.less
+++ b/docs/source/_assets/less/prism.less
@@ -8,7 +8,7 @@
 code[class*="language-"],
 pre[class*="language-"] {
   @apply .font-mono;
-  @apply .text-slate-dark;
+  @apply .text-grey-darkest;
 
   background: none;
   text-align: left;
diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php
index 7e864556d..3e11a5028 100644
--- a/docs/source/_layouts/documentation.blade.php
+++ b/docs/source/_layouts/documentation.blade.php
@@ -20,8 +20,8 @@
 
 @section('body')
 <div class="min-h-screen">
-  <div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll md:overflow-visible scrolling-touch md:scrolling-auto bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
-    <div class="border-b border-smoke flex-none px-8 py-6">
+  <div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll md:overflow-visible scrolling-touch md:scrolling-auto bg-grey-lighter w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-grey-light md:flex flex-col">
+    <div class="border-b border-grey-light flex-none px-8 py-6">
       <div class="mb-4">
         <div class="hidden md:flex md:justify-center">
           <a href="/" class="flex justify-center">
@@ -33,9 +33,9 @@
         </p>
       </div>
       <div class="relative">
-        <input id="docsearch" class="placeholder-grey-dark rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
+        <input id="docsearch" class="placeholder-grey-dark rounded bg-white border border-grey-light py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
         <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
-          <svg class="fill-current pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
+          <svg class="fill-current pointer-events-none text-grey-darker w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
         </div>
       </div>
     </div>
@@ -43,18 +43,18 @@
       <nav id="nav" class="text-base overflow-y-scroll">
         @foreach ($page->navigation as $sectionName => $sectionItems)
         <div class="mb-8">
-          <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p>
+          <p class="mb-4 text-grey-dark uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p>
           <ul>
             @foreach ($sectionItems as $name => $slugOrChildren)
               @if (is_string($slugOrChildren))
-                <li class="mb-3"><a class="hover:underline {{ $page->active('/docs/' . $slugOrChildren) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren }}">{{ $name }}</a></li>
+                <li class="mb-3"><a class="hover:underline {{ $page->active('/docs/' . $slugOrChildren) ? 'text-black font-bold' : 'text-grey-darkest' }}" href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren }}">{{ $name }}</a></li>
               @else
                 <li class="mb-3">
-                  <a href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren->first() }}" class="hover:underline block mb-2 {{ $page->anyChildrenActive($slugOrChildren) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">{{ $name }}</a>
+                  <a href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren->first() }}" class="hover:underline block mb-2 {{ $page->anyChildrenActive($slugOrChildren) ? 'text-black font-bold' : 'text-grey-darkest' }}">{{ $name }}</a>
                   <ul class="pl-4 {{ $page->anyChildrenActive($slugOrChildren) ? 'block' : 'hidden' }}">
                   @foreach ($slugOrChildren as $title => $link)
                     <li class="mb-3">
-                      <a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
+                      <a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-black font-bold' : 'text-grey-darkest' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
                         {{ $title }}
                       </a>
                     </li>
@@ -68,7 +68,7 @@
         @endforeach
       </nav>
     </div>
-    <div class="border-t border-smoke px-8 py-4">
+    <div class="border-t border-grey-light px-8 py-4">
       <div class="flex justify-center text-grey">
         <a class="block flex items-center hover:text-grey-darker mr-16" href="https://github.com/tailwindcss/tailwindcss">
           <svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>GitHub</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"/></svg>
@@ -100,7 +100,7 @@
         <div class="markdown">
           <h1>{{ $page->title }}</h1>
           @if ($page->description)
-            <div class="text-xl text-slate-light mb-4">
+            <div class="text-xl text-grey-dark mb-4">
               {{ $page->description }}
             </div>
           @endif
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 7dcf026de..a98faa0f5 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -18,7 +18,7 @@
   <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
   @stack('headScripts')
 </head>
-<body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
+<body data-sidebar-visible="true" class="font-sans font-normal text-black leading-normal">
 
 @yield('body')
 
diff --git a/docs/source/_partials/class-table.blade.php b/docs/source/_partials/class-table.blade.php
index cc315dc9b..76eb53499 100644
--- a/docs/source/_partials/class-table.blade.php
+++ b/docs/source/_partials/class-table.blade.php
@@ -16,9 +16,9 @@
       <tbody class="align-baseline">
         @foreach ($rows as $row)
         <tr>
-          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{!! $row[0] !!}</td>
-          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{!! $row[1] !!}</td>
-          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{!! $row[2] !!}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-grey-light' : 'border-grey-lighter' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{!! $row[0] !!}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-grey-light' : 'border-grey-lighter' }} font-mono text-xs text-blue-dark whitespace-pre">{!! $row[1] !!}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-grey-light' : 'border-grey-lighter' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{!! $row[2] !!}</td>
         </tr>
         @endforeach
       </tbody>
diff --git a/docs/source/_partials/customized-config.blade.php b/docs/source/_partials/customized-config.blade.php
index 881ed5dc8..d5ab3e593 100644
--- a/docs/source/_partials/customized-config.blade.php
+++ b/docs/source/_partials/customized-config.blade.php
@@ -1,5 +1,5 @@
-<div class="border-2 border-smoke rounded mb-8">
-  <div class="bg-smoke-lighter p-4 font-mono text-sm">
+<div class="border-2 border-grey-light rounded mb-8">
+  <div class="bg-grey-lightest p-4 font-mono text-sm">
     <div class="whitespace-pre text-grey-dark">{</div>
     <div class="whitespace-pre text-grey-light">  // ...</div>
     <div class="whitespace-pre text-grey-dark"><span class="text-purple-dark">  {{ $key }}</span>: {</div>
diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md
index df282009d..d80d257fc 100644
--- a/docs/source/docs/border-width.blade.md
+++ b/docs/source/docs/border-width.blade.md
@@ -17,21 +17,21 @@ For example, `.border` would add a `1px` border to all sides of the element, whe
 
 <div class="flex items-start mt-8 text-sm leading-none">
   <div class="pr-12">
-    <div class="mb-3 text-slate uppercase">Class</div>
+    <div class="mb-3 text-grey-darker uppercase">Class</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">border</code></div>
   </div>
   <div class="pl-12 pr-12 border-l">
-    <div class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+    <div class="mb-3 text-grey-darker"><span class="uppercase">Side</span> <span class="text-grey-dark text-xs">(optional)</span></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter">&nbsp;</code> All <em class="text-xs text-grey-dark">(default)</em></div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
   </div>
   <div class="pl-12 border-l">
-    <div class="mb-3 text-slate"><span class="uppercase">Width</span> <span class="text-slate-light text-xs">(optional)</span></div>
+    <div class="mb-3 text-grey-darker"><span class="uppercase">Width</span> <span class="text-grey-dark text-xs">(optional)</span></div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0px</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter">&nbsp;</code> 1px <em class="text-xs text-grey-dark">(default)</em></div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 2px</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 4px</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>
diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md
index e4ca285b7..f039ea4a1 100644
--- a/docs/source/docs/colors.blade.md
+++ b/docs/source/docs/colors.blade.md
@@ -13,8 +13,8 @@ To get you started, we've provided a generous palette of great looking colors th
 <div class="flex flex-wrap -mx-4">
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Grey</div>
+      <div class="text-black bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
+        <div class="uppercase mb-6">Grey</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
@@ -24,19 +24,19 @@ To get you started, we've provided a generous palette of great looking colors th
         <span>White</span>
         <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['white']) }}</span>
       </div>
-      <div class="text-grey-darkest bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
+      <div class="text-black bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
         <span>Lightest</span>
         <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
       </div>
-      <div class="text-grey-darkest bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
+      <div class="text-black bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
         <span>Lighter</span>
         <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
       </div>
-      <div class="text-grey-darkest bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
+      <div class="text-black bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
         <span>Light</span>
         <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
       </div>
-      <div class="text-white bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
+      <div class="text-black bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
         <span>Base</span>
         <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
       </div>
@@ -64,7 +64,7 @@ To get you started, we've provided a generous palette of great looking colors th
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-red px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Red</div>
+        <div class="uppercase mb-6">Red</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red']) }}</span>
@@ -103,7 +103,7 @@ To get you started, we've provided a generous palette of great looking colors th
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-orange px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Orange</div>
+        <div class="uppercase mb-6">Orange</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange']) }}</span>
@@ -142,7 +142,7 @@ To get you started, we've provided a generous palette of great looking colors th
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-yellow-darkest bg-yellow px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Yellow</div>
+        <div class="uppercase mb-6">Yellow</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow']) }}</span>
@@ -181,7 +181,7 @@ To get you started, we've provided a generous palette of great looking colors th
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-green px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Green</div>
+        <div class="uppercase mb-6">Green</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green']) }}</span>
@@ -220,7 +220,7 @@ To get you started, we've provided a generous palette of great looking colors th
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-teal px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Teal</div>
+        <div class="uppercase mb-6">Teal</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal']) }}</span>
@@ -259,7 +259,7 @@ To get you started, we've provided a generous palette of great looking colors th
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-blue px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Blue</div>
+        <div class="uppercase mb-6">Blue</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue']) }}</span>
@@ -298,7 +298,7 @@ To get you started, we've provided a generous palette of great looking colors th
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-indigo px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Indigo</div>
+        <div class="uppercase mb-6">Indigo</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo']) }}</span>
@@ -337,7 +337,7 @@ To get you started, we've provided a generous palette of great looking colors th
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-purple px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Purple</div>
+        <div class="uppercase mb-6">Purple</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple']) }}</span>
@@ -376,7 +376,7 @@ To get you started, we've provided a generous palette of great looking colors th
   <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
     <div class="rounded overflow-hidden">
       <div class="text-white bg-pink px-6 py-4 text-sm font-semibold relative shadow z-10">
-        <div class="tracking-wide uppercase mb-6">Pink</div>
+        <div class="uppercase mb-6">Pink</div>
         <div class="flex justify-between">
           <span>Base</span>
           <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink']) }}</span>
diff --git a/docs/source/docs/configuration.blade.md b/docs/source/docs/configuration.blade.md
index 8e06a694f..9e92a8522 100644
--- a/docs/source/docs/configuration.blade.md
+++ b/docs/source/docs/configuration.blade.md
@@ -16,8 +16,8 @@ It's important to understand that unlike other CSS frameworks you might have use
 
 Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package:
 
-<div class="bg-smoke-lighter font-mono text-sm p-4">
-  <div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
+<div class="bg-grey-lightest font-mono text-sm p-4">
+  <div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-grey-dark">[filename]</span></div>
 </div>
 
 By default, `tailwind init` will generate a `tailwind.js` config file at the root of your project, but feel free to name this file differently or store it in a different location if you prefer.
diff --git a/docs/source/docs/container.blade.md b/docs/source/docs/container.blade.md
index 9f79aa78b..b17f8d169 100644
--- a/docs/source/docs/container.blade.md
+++ b/docs/source/docs/container.blade.md
@@ -22,25 +22,25 @@ description: "A component for fixing an element's width to the current breakpoin
     </thead>
     <tbody class="align-baseline">
       <tr>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark" rowspan="5">.container</td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-grey-dark"><span class="italic">None</span></td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">width: 100%;</td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-purple-dark" rowspan="5">.container</td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-dark"><span class="italic">None</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">width: 100%;</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">sm <span class="text-grey-dark italic">(576px)</span></td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 576px;</td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">sm <span class="text-grey-dark italic">(576px)</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 576px;</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">md <span class="text-grey-dark italic">(768px)</span></td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 768px;</td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">md <span class="text-grey-dark italic">(768px)</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 768px;</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">lg <span class="text-grey-dark italic">(992px)</span></td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 992px;</td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">lg <span class="text-grey-dark italic">(992px)</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 992px;</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">xl <span class="text-grey-dark italic">(1200px)</span></td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 1200px;</td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">xl <span class="text-grey-dark italic">(1200px)</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 1200px;</td>
       </tr>
     </tbody>
   </table>
diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md
index 79aad9247..911c9a342 100644
--- a/docs/source/docs/flexbox-align-content.blade.md
+++ b/docs/source/docs/flexbox-align-content.blade.md
@@ -39,26 +39,26 @@ features:
   ]
 ])
 
-### Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Start <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.content-start` to pack lines in a flex container against the start of the cross axis:
 
 @component('_partials.code-sample')
-<div class="flex content-start flex-wrap bg-smoke-light h-48">
+<div class="flex content-start flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endcomponent
@@ -68,21 +68,21 @@ Use `.content-start` to pack lines in a flex container against the start of the
 Use `.content-center` to pack lines in a flex container in the center of the cross axis:
 
 @component('_partials.code-sample')
-<div class="flex content-center flex-wrap bg-smoke-light h-48">
+<div class="flex content-center flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endcomponent
@@ -92,21 +92,21 @@ Use `.content-center` to pack lines in a flex container in the center of the cro
 Use `.content-end` to pack lines in a flex container against the end of the cross axis:
 
 @component('_partials.code-sample')
-<div class="flex content-end flex-wrap bg-smoke-light h-48">
+<div class="flex content-end flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endcomponent
@@ -116,21 +116,21 @@ Use `.content-end` to pack lines in a flex container against the end of the cros
 Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line:
 
 @component('_partials.code-sample')
-<div class="flex content-between flex-wrap bg-smoke-light h-48">
+<div class="flex content-between flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endcomponent
@@ -140,21 +140,21 @@ Use `.content-between` to distribute lines in a flex container such that there i
 Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line:
 
 @component('_partials.code-sample')
-<div class="flex content-around flex-wrap bg-smoke-light h-48">
+<div class="flex content-around flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endcomponent
@@ -167,97 +167,97 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="flex content-start flex-wrap bg-smoke-light h-48">
+<div class="flex content-start flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endslot
 @slot('sm')
-<div class="flex content-end flex-wrap bg-smoke-light h-48">
+<div class="flex content-end flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endslot
 @slot('md')
-<div class="flex content-center flex-wrap bg-smoke-light h-48">
+<div class="flex content-center flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endslot
 @slot('lg')
-<div class="flex content-between flex-wrap bg-smoke-light h-48">
+<div class="flex content-between flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endslot
 @slot('xl')
-<div class="flex content-around flex-wrap bg-smoke-light h-48">
+<div class="flex content-around flex-wrap bg-grey-lighter h-48">
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">4</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">4</div>
   </div>
   <div class="w-1/3 p-2">
-    <div class="text-slate text-center bg-smoke p-2">5</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">5</div>
   </div>
 </div>
 @endslot
diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md
index bed33536c..bbe7c1098 100644
--- a/docs/source/docs/flexbox-align-items.blade.md
+++ b/docs/source/docs/flexbox-align-items.blade.md
@@ -39,15 +39,15 @@ features:
   ]
 ])
 
-### Stretch <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Stretch <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.items-stretch` to stretch items to fill the flex container's cross axis:
 
 @component('_partials.code-sample')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -56,10 +56,10 @@ Use `.items-stretch` to stretch items to fill the flex container's cross axis:
 Use `.items-start` to align items to the start of the flex container's cross axis:
 
 @component('_partials.code-sample')
-<div class="flex items-start bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-start bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -68,10 +68,10 @@ Use `.items-start` to align items to the start of the flex container's cross axi
 Use `.items-center` to align items along the center of the flex container's cross axis:
 
 @component('_partials.code-sample')
-<div class="flex items-center bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-center bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -80,10 +80,10 @@ Use `.items-center` to align items along the center of the flex container's cros
 Use `.items-end` to align items to the end of the flex container's cross axis:
 
 @component('_partials.code-sample')
-<div class="flex items-end bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-end bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -92,10 +92,10 @@ Use `.items-end` to align items to the end of the flex container's cross axis:
 Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align:
 
 @component('_partials.code-sample')
-<div class="flex items-baseline bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+<div class="flex items-baseline bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
 </div>
 @endcomponent
 
@@ -107,38 +107,38 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
 </div>
 @endslot
 @slot('sm')
-<div class="flex items-start bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+<div class="flex items-start bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
 </div>
 @endslot
 @slot('md')
-<div class="flex items-center bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+<div class="flex items-center bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
 </div>
 @endslot
 @slot('lg')
-<div class="flex items-end bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+<div class="flex items-end bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
 </div>
 @endslot
 @slot('xl')
-<div class="flex items-baseline bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+<div class="flex items-baseline bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md
index 661d4b543..6d62577a6 100644
--- a/docs/source/docs/flexbox-align-self.blade.md
+++ b/docs/source/docs/flexbox-align-self.blade.md
@@ -39,15 +39,15 @@ features:
   ]
 ])
 
-### Auto <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Auto <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.self-auto` to align an item based on the value of the flex container's `align-items` property:
 
 @component('_partials.code-sample')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-auto flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-auto flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -56,10 +56,10 @@ Use `.self-auto` to align an item based on the value of the flex container's `al
 Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value:
 
 @component('_partials.code-sample')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-start flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-start flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -68,10 +68,10 @@ Use `.self-start` to align an item to the start of the flex container's cross ax
 Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value:
 
 @component('_partials.code-sample')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-center flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-center flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -80,10 +80,10 @@ Use `.self-center` to align an item along the center of the flex container's cro
 Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value:
 
 @component('_partials.code-sample')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-end flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-end flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -92,10 +92,10 @@ Use `.self-end` to align an item to the end of the flex container's cross axis,
 Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value:
 
 @component('_partials.code-sample')
-<div class="flex items-start bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-stretch flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-start bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-stretch flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -107,38 +107,38 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-auto flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-auto flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('sm')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-start flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-start flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('md')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-end flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-end flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('lg')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-center flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-center flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('xl')
-<div class="flex items-stretch bg-smoke-light h-24">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="self-stretch flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex items-stretch bg-grey-lighter h-24">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="self-stretch flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md
index ec60d92a5..0388046e1 100644
--- a/docs/source/docs/flexbox-direction.blade.md
+++ b/docs/source/docs/flexbox-direction.blade.md
@@ -34,15 +34,15 @@ features:
   ]
 ])
 
-### Row <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Row <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.flex-row` to position flex items horizontally in the same direction as text:
 
 @component('_partials.code-sample')
-<div class="flex flex-row bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex flex-row bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -51,10 +51,10 @@ Use `.flex-row` to position flex items horizontally in the same direction as tex
 Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
 
 @component('_partials.code-sample')
-<div class="flex flex-row-reverse bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex flex-row-reverse bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -63,10 +63,10 @@ Use `.flex-row-reverse` to position flex items horizontally in the opposite dire
 Use `.flex-col` to position flex items vertically:
 
 @component('_partials.code-sample')
-<div class="flex flex-col bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex flex-col bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -75,10 +75,10 @@ Use `.flex-col` to position flex items vertically:
 Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
 
 @component('_partials.code-sample')
-<div class="flex flex-col-reverse bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex flex-col-reverse bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -90,38 +90,38 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="flex flex-row bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex flex-row bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('sm')
-<div class="flex flex-col bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex flex-col bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('md')
-<div class="flex flex-row-reverse bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex flex-row-reverse bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('lg')
-<div class="flex flex-col-reverse bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex flex-col-reverse bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('xl')
-<div class="flex flex-row bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex flex-row bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md
index c01ccb6f4..7d008ffc3 100644
--- a/docs/source/docs/flexbox-display.blade.md
+++ b/docs/source/docs/flexbox-display.blade.md
@@ -29,10 +29,10 @@ features:
 Use `.flex` to create a block-level flex container:
 
 @component('_partials.code-sample')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -41,10 +41,10 @@ Use `.flex` to create a block-level flex container:
 Use `.inline-flex` to create an inline flex container:
 
 @component('_partials.code-sample')
-<div class="inline-flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="inline-flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -56,38 +56,38 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('sm')
-<div class="inline-flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="inline-flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('md')
-<div class="block bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="block bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('lg')
-<div class="hidden bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="hidden bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('xl')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md
index e55f3c91b..3b1118c84 100644
--- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md
+++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md
@@ -54,52 +54,52 @@ features:
   ]
 ])
 
-### Initial <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Initial <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size:
 
 @component('_partials.code-sample')
-<p class="text-sm text-slate-light mb-1">Items don't grow when there's extra space</p>
-<div class="flex bg-smoke-light mb-6">
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+<p class="text-sm text-grey-dark mb-1">Items don't grow when there's extra space</p>
+<div class="flex bg-grey-lighter mb-6">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
 </div>
 
-<p class="text-sm text-slate-light mb-1">Items shrink if possible when needed</p>
-<div class="flex bg-smoke-light">
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+<p class="text-sm text-grey-dark mb-1">Items shrink if possible when needed</p>
+<div class="flex bg-grey-lighter">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
   </div>
 </div>
 
 @slot('code')
-<div class="flex bg-smoke-light">
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
 </div>
 
-<div class="flex bg-smoke-light">
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
-  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
   </div>
 </div>
@@ -111,40 +111,40 @@ Use `.flex-initial` to allow a flex item to shrink but not grow, taking into acc
 Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size:
 
 @component('_partials.code-sample')
-<p class="text-sm text-slate-light mb-1">Default behavior</p>
-<div class="flex bg-smoke-light mb-6">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+<p class="text-sm text-grey-dark mb-1">Default behavior</p>
+<div class="flex bg-grey-lighter mb-6">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Significantly larger amount of content
   </div>
 </div>
-<p class="text-sm text-slate-light mb-1">With <code>.flex-1</code></p>
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+<p class="text-sm text-grey-dark mb-1">With <code>.flex-1</code></p>
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Significantly larger amount of content
   </div>
 </div>
 
 @slot('code')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Significantly larger amount of content
   </div>
 </div>
@@ -156,40 +156,40 @@ Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring its in
 Use `.flex-auto` to allow a flex item to grow and shrink, taking into account its initial size:
 
 @component('_partials.code-sample')
-<p class="text-sm text-slate-light mb-1">Default behavior</p>
-<div class="flex bg-smoke-light mb-6">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+<p class="text-sm text-grey-dark mb-1">Default behavior</p>
+<div class="flex bg-grey-lighter mb-6">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Significantly larger amount of content
   </div>
 </div>
-<p class="text-sm text-slate-light mb-1">With <code>.flex-auto</code></p>
-<div class="flex bg-smoke-light">
-  <div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
+<p class="text-sm text-grey-dark mb-1">With <code>.flex-auto</code></p>
+<div class="flex bg-grey-lighter">
+  <div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
-  <div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Significantly larger amount of content
   </div>
 </div>
 
 @slot('code')
-<div class="flex bg-smoke-light">
-  <div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Short
   </div>
-  <div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Medium length
   </div>
-  <div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Significantly larger amount of content
   </div>
 </div>
@@ -201,14 +201,14 @@ Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it
 Use `.flex-none` to prevent a flex item from growing or shrinking:
 
 @component('_partials.code-sample')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
-  <div class="flex-none text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-none text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Item that cannot grow or shrink
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
 </div>
@@ -219,14 +219,14 @@ Use `.flex-none` to prevent a flex item from growing or shrinking:
 Use `.flex-grow` to allow a flex item to grow to fill any available space:
 
 @component('_partials.code-sample')
-<div class="flex bg-smoke-light">
-  <div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Content that cannot flex
   </div>
-  <div class="flex-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Item that will grow
   </div>
-  <div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Content that cannot flex
   </div>
 </div>
@@ -237,14 +237,14 @@ Use `.flex-grow` to allow a flex item to grow to fill any available space:
 Use `.flex-no-grow` to prevent a flex item from growing:
 
 @component('_partials.code-sample')
-<div class="flex bg-smoke-light">
-  <div class="flex-grow text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-grow text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Will grow
   </div>
-  <div class="flex-no-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-no-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Will not grow
   </div>
-  <div class="flex-grow text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-grow text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Will grow
   </div>
 </div>
@@ -255,14 +255,14 @@ Use `.flex-no-grow` to prevent a flex item from growing:
 Use `.flex-shrink` to allow a flex item to shrink if needed:
 
 @component('_partials.code-sample')
-<div class="flex bg-smoke-light">
-  <div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Longer content that cannot flex
   </div>
-  <div class="flex-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Item that will shrink even if it causes the content to wrap
   </div>
-  <div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Longer content that cannot flex
   </div>
 </div>
@@ -273,14 +273,14 @@ Use `.flex-shrink` to allow a flex item to shrink if needed:
 Use `.flex-no-shrink` to prevent a flex item from shrinking:
 
 @component('_partials.code-sample')
-<div class="flex bg-smoke-light">
-  <div class="flex-shrink text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-shrink text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can shrink if needed
   </div>
-  <div class="flex-no-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-no-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Item that cannot shrink below its initial size
   </div>
-  <div class="flex-shrink text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-shrink text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can shrink if needed
   </div>
 </div>
@@ -294,66 +294,66 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
-  <div class="flex-none text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-none text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Responsive flex item
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
 </div>
 @endslot
 @slot('sm')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
-  <div class="flex-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Responsive flex item
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
 </div>
 @endslot
 @slot('md')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
-  <div class="flex-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Responsive flex item
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
 </div>
 @endslot
 @slot('lg')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
-  <div class="flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Responsive flex item
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
 </div>
 @endslot
 @slot('xl')
-<div class="flex bg-smoke-light">
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+<div class="flex bg-grey-lighter">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
-  <div class="flex-initial text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
+  <div class="flex-initial text-grey-darkest text-center bg-grey px-4 py-2 m-2">
     Responsive flex item
   </div>
-  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+  <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
     Item that can grow or shrink if needed
   </div>
 </div>
diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md
index 8d0045856..c8c5cec15 100644
--- a/docs/source/docs/flexbox-justify-content.blade.md
+++ b/docs/source/docs/flexbox-justify-content.blade.md
@@ -39,15 +39,15 @@ features:
   ]
 ])
 
-### Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Start <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.justify-start` to justify items against the start of the flex container's main axis:
 
 @component('_partials.code-sample')
-<div class="flex justify-start bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-start bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -56,10 +56,10 @@ Use `.justify-start` to justify items against the start of the flex container's
 Use `.justify-center` to justify items along the center of the flex container's main axis:
 
 @component('_partials.code-sample')
-<div class="flex justify-center bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-center bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -68,10 +68,10 @@ Use `.justify-center` to justify items along the center of the flex container's
 Use `.justify-end` to justify items against the end of the flex container's main axis:
 
 @component('_partials.code-sample')
-<div class="flex justify-end bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-end bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -80,10 +80,10 @@ Use `.justify-end` to justify items against the end of the flex container's main
 Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item:
 
 @component('_partials.code-sample')
-<div class="flex justify-between bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-between bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -92,10 +92,10 @@ Use `.justify-between` to justify items along the flex container's main axis suc
 Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item:
 
 @component('_partials.code-sample')
-<div class="flex justify-around bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-around bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
 
@@ -107,38 +107,38 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="flex justify-start bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-start bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('sm')
-<div class="flex justify-center bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-center bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('md')
-<div class="flex justify-end bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-end bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('lg')
-<div class="flex justify-between bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-between bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('xl')
-<div class="flex justify-around bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-around bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md
index 7ccae20a9..596e66b7a 100644
--- a/docs/source/docs/flexbox-wrapping.blade.md
+++ b/docs/source/docs/flexbox-wrapping.blade.md
@@ -29,20 +29,20 @@ features:
   ]
 ])
 
-### Don't wrap <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Don't wrap <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
 
 @component('_partials.code-sample')
-<div class="flex flex-no-wrap bg-smoke-light">
+<div class="flex flex-no-wrap bg-grey-lighter">
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
 </div>
 @endcomponent
@@ -52,15 +52,15 @@ Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible item
 Use `.flex-wrap` to allow flex items to wrap:
 
 @component('_partials.code-sample')
-<div class="flex flex-wrap bg-smoke-light">
+<div class="flex flex-wrap bg-grey-lighter">
   <div class="w-2/5 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-2/5 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-2/5 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
 </div>
 @endcomponent
@@ -70,15 +70,15 @@ Use `.flex-wrap` to allow flex items to wrap:
 Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
 
 @component('_partials.code-sample')
-<div class="flex flex-wrap-reverse bg-smoke-light">
+<div class="flex flex-wrap-reverse bg-grey-lighter">
   <div class="w-2/5 p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-2/5 p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-2/5 p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
 </div>
 @endcomponent
@@ -91,67 +91,67 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="flex flex-no-wrap bg-smoke-light">
+<div class="flex flex-no-wrap bg-grey-lighter">
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
 </div>
 @endslot
 @slot('sm')
-<div class="flex flex-wrap bg-smoke-light">
+<div class="flex flex-wrap bg-grey-lighter">
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
 </div>
 @endslot
 @slot('md')
-<div class="flex flex-wrap-reverse bg-smoke-light">
+<div class="flex flex-wrap-reverse bg-grey-lighter">
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
 </div>
 @endslot
 @slot('lg')
-<div class="flex flex-no-wrap bg-smoke-light">
+<div class="flex flex-no-wrap bg-grey-lighter">
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
 </div>
 @endslot
 @slot('xl')
-<div class="flex flex-wrap bg-smoke-light">
+<div class="flex flex-wrap bg-grey-lighter">
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">1</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">1</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">2</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">2</div>
   </div>
   <div class="w-2/5 flex-none p-2">
-    <div class="text-slate text-center bg-smoke p-2">3</div>
+    <div class="text-grey-darker text-center bg-grey-light p-2">3</div>
   </div>
 </div>
 @endslot
diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md
index c717769c5..3aa0b4d15 100644
--- a/docs/source/docs/forms.blade.md
+++ b/docs/source/docs/forms.blade.md
@@ -32,7 +32,7 @@ Form controls are great candidates for component classes, but just for fun, here
     <option>Option 2</option>
     <option>Option 3</option>
   </select>
-  <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-slate">
+  <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
     <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
   </div>
 </div>
diff --git a/docs/source/docs/installation.blade.md b/docs/source/docs/installation.blade.md
index e3e85b666..5b09d8db7 100644
--- a/docs/source/docs/installation.blade.md
+++ b/docs/source/docs/installation.blade.md
@@ -32,10 +32,10 @@ For most projects (and to take advantage of Tailwind's customization features),
 
 Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
 
-<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
-  <div class="text-smoke-darker"># Using npm</div>
+<div class="rounded bg-grey-lightest border-2 border-grey-light font-mono text-sm p-4">
+  <div class="text-grey-dark"># Using npm</div>
   <div class="text-purple-dark">npm install <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--save-dev</span></div>
-  <div class="text-smoke-darker mt-6"># Using Yarn</div>
+  <div class="text-grey-dark mt-6"># Using Yarn</div>
   <div class="text-purple-dark">yarn add <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--dev</span></div>
 </div>
 
@@ -45,8 +45,8 @@ Tailwind is configured almost entirely in plain JavaScript. To do this you'll ne
 
 We've provided a CLI utility to do this easily:
 
-<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
-  <div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
+<div class="rounded bg-grey-lightest border-2 border-grey-light font-mono text-sm p-4">
+  <div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-grey-dark">[filename]</span></div>
 </div>
 
 ### 3. Use Tailwind in your CSS
@@ -64,7 +64,7 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
  * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
  *
  * If using `postcss-import`, you should import this line from it's own file:
- * 
+ *
  * @@import "./tailwind-preflight.css";
  *
  * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
@@ -92,7 +92,7 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
  * config file.
  *
  * If using `postcss-import`, you should import this line from it's own file:
- * 
+ *
  * @@import "./tailwind-utilities.css";
  *
  * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
@@ -121,8 +121,8 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
 
 For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:
 
-<div class="bg-smoke-lighter font-mono text-sm p-4">
-  <div class="text-purple-dark">./node_modules/.bin/tailwind build <span class="text-blue-dark">styles.css</span> <span class="text-smoke-darker">[-c ./tailwind.js] [-o ./output.css]</span></div>
+<div class="bg-grey-lightest font-mono text-sm p-4">
+  <div class="text-purple-dark">./node_modules/.bin/tailwind build <span class="text-blue-dark">styles.css</span> <span class="text-grey-dark">[-c ./tailwind.js] [-o ./output.css]</span></div>
 </div>
 
 #### Using Tailwind with PostCSS
diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md
index 8484b41f8..fdfe1a94b 100644
--- a/docs/source/docs/opacity.blade.md
+++ b/docs/source/docs/opacity.blade.md
@@ -44,7 +44,7 @@ features:
 @component('_partials.code-sample')
 <div class="flex -mx-2">
   @foreach ($page->config['opacity']->reverse() as $name => $value)
-    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 mx-2 opacity-{{ $name }}">.opacity-{{ $name }}</div>
+    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 mx-2 opacity-{{ $name }}">.opacity-{{ $name }}</div>
   @endforeach
 </div>
 @slot('code')
@@ -63,27 +63,27 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-grey-light opacity-100 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-grey-light opacity-75 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('md')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-grey-light opacity-50 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-grey-light opacity-25 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="text-center">
-  <div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 rounded-full inline-block"></div>
+  <div class="px-4 py-2 bg-grey-light opacity-0 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md
index 36f930bf8..af055f190 100644
--- a/docs/source/docs/overflow.blade.md
+++ b/docs/source/docs/overflow.blade.md
@@ -54,13 +54,13 @@ features:
   ]
 ])
 
-### Visible <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Visible <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.overflow-visible` to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.
 
 @component('_partials.code-sample')
 <div class="overflow-hidden h-24">
-  <div class="overflow-visible h-32 bg-smoke text-slate p-2">
+  <div class="overflow-visible h-32 bg-grey-light text-grey-darker p-2">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
   </div>
 </div>
@@ -74,7 +74,7 @@ Use `.overflow-visible` to prevent content within an element from being clipped.
 Use `.overflow-auto` to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike `.overflow-scroll`, which always show scrollbars, this utility will only show them if scrolling is necessary.
 
 @component('_partials.code-sample')
-<div class="overflow-scroll h-32 bg-smoke text-slate p-2">
+<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
 </div>
 @slot('code')
@@ -87,7 +87,7 @@ Use `.overflow-auto` to add scrollbars to an element in the event that its conte
 Use `.overflow-hidden` to clip any content within an element that overflows the bounds of that element.
 
 @component('_partials.code-sample')
-<div class="overflow-hidden h-32 bg-smoke text-slate p-2">
+<div class="overflow-hidden h-32 bg-grey-light text-grey-darker p-2">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
 </div>
 @slot('code')
@@ -100,7 +100,7 @@ Use `.overflow-hidden` to clip any content within an element that overflows the
 Use `.overflow-x-scroll` to allow horizontal scrolling if needed.
 
 @component('_partials.code-sample')
-<div class="overflow-scroll bg-smoke text-slate p-2">
+<div class="overflow-scroll bg-grey-light text-grey-darker p-2">
   QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
 </div>
 
@@ -114,7 +114,7 @@ Use `.overflow-x-scroll` to allow horizontal scrolling if needed.
 Use `.overflow-y-scroll` to allow horizontal scrolling if needed.
 
 @component('_partials.code-sample')
-<div class="overflow-scroll h-32 bg-smoke text-slate p-2">
+<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
 </div>
 
@@ -128,18 +128,18 @@ Use `.overflow-y-scroll` to allow horizontal scrolling if needed.
 Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems, like MacOS, hide unnecessary scrollbars regardless of this setting.
 
 @component('_partials.code-sample')
-<p class="text-sm text-slate-light mb-1">Scroll horizontally when content can't wrap</p>
-<div class="overflow-scroll bg-smoke text-slate p-2 mb-6">
+<p class="text-sm text-grey-dark mb-1">Scroll horizontally when content can't wrap</p>
+<div class="overflow-scroll bg-grey-light text-grey-darker p-2 mb-6">
   QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
 </div>
 
-<p class="text-sm text-slate-light mb-1">Scroll vertically when content can wrap</p>
-<div class="overflow-scroll h-32 bg-smoke text-slate p-2 mb-6">
+<p class="text-sm text-grey-dark mb-1">Scroll vertically when content can wrap</p>
+<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2 mb-6">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
 </div>
 
-<p class="text-sm text-slate-light mb-1">Scroll both horizontally and vertically when some content can't wrap</p>
-<div class="overflow-scroll h-32 bg-smoke text-slate p-2">
+<p class="text-sm text-grey-dark mb-1">Scroll both horizontally and vertically when some content can't wrap</p>
+<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2">
   Loremipsumdolorsitamet,consecteturadipiscingelit.Mauriseleifendrutrumauctor.Phasellusconvallissagittisaugueutornare.Donecexlorem,auctoreurutrumin,blanditiddolor.Nullamolestiearcuturpis.Inidfelisvulputate,tempormassaeget,malesuadamauris.Quisquefringillaconsequatmetus,luctusscelerisqueleofringillavel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel. Ullam repudiandae omnis tempora soluta non, sed corporis vel reiciendis reprehenderit vitae nobis dolorum maiores eaque eos nemo mollitia animi, adipisci, molestias? Nam quo odio, similique iure, molestias ullam! Temporibus vel ab, fuga, ut nihil fugiat quaerat tenetur veniam, excepturi natus hic dolorum fugit. Ab sint molestiae nihil ex, minima facere sit adipisci. Totam quos eveniet, quibusdam qui quis aperiam aut nihil perferendis earum in error. Autem porro deleniti molestiae odio delectus alias dolorem nihil voluptates a, quam corrupti sapiente, nulla ea omnis quas ipsam rerum atque excepturi! Corporis culpa asperiores sint voluptatum, quos, cupiditate iste similique illum quas libero, temporibus laborum quisquam esse veritatis eligendi qui odit quo repellat!
 </div>
 @slot('code')
@@ -154,7 +154,7 @@ Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`,
 Use `.scrolling-touch` to use momentum-based scrolling (where supported) on touch devices.
 
 @component('_partials.code-sample')
-<div class="scrolling-touch overflow-auto h-32 bg-smoke text-slate p-2">
+<div class="scrolling-touch overflow-auto h-32 bg-grey-light text-grey-darker p-2">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
 </div>
 @slot('code')
@@ -167,7 +167,7 @@ Use `.scrolling-auto` to use normal non-momentum-based scrolling on touch device
 This is mostly useful for undoing `.scrolling-touch` at larger screen sizes.
 
 @component('_partials.code-sample')
-<div class="scrolling-auto overflow-auto h-32 bg-smoke text-slate p-2">
+<div class="scrolling-auto overflow-auto h-32 bg-grey-light text-grey-darker p-2">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
 </div>
 @slot('code')
@@ -183,32 +183,32 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="overflow-auto h-32 bg-smoke text-slate p-2">
+<div class="overflow-auto h-32 bg-grey-light text-grey-darker p-2">
   QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
 </div>
 @endslot
 @slot('sm')
-<div class="overflow-visible h-32 bg-smoke text-slate p-2">
+<div class="overflow-visible h-32 bg-grey-light text-grey-darker p-2">
   QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
 @endslot
 @slot('md')
-<div class="overflow-hidden h-32 bg-smoke text-slate p-2">
+<div class="overflow-hidden h-32 bg-grey-light text-grey-darker p-2">
   QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
 @endslot
 @slot('lg')
-<div class="overflow-x-scroll h-32 bg-smoke text-slate p-2">
+<div class="overflow-x-scroll h-32 bg-grey-light text-grey-darker p-2">
   QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
 @endslot
 @slot('xl')
-<div class="overflow-y-scroll h-32 bg-smoke text-slate p-2">
+<div class="overflow-y-scroll h-32 bg-grey-light text-grey-darker p-2">
   QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md
index c1dc30eab..64cd7b5ed 100644
--- a/docs/source/docs/positioning.blade.md
+++ b/docs/source/docs/positioning.blade.md
@@ -69,26 +69,26 @@ features:
   ]
 ])
 
-### Static <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Static <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.static` to position an element according to the normal flow of the document.
 
 Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.
 
 @component('_partials.code-sample')
-<div class="relative bg-smoke p-4">
-  <div class="static h-32 bg-smoke-darker p-4 text-slate-darker">
+<div class="relative bg-grey-light p-4">
+  <div class="static h-32 bg-grey-dark p-4 text-black">
     <p>Static parent</p>
-    <div class="absolute pin-b pin-l bg-slate-dark p-4 text-smoke">
+    <div class="absolute pin-b pin-l bg-grey-darkest p-4 text-grey-light">
       <p>Absolute child</p>
     </div>
   </div>
 </div>
 
 @slot('code')
-<div class="static bg-smoke-darker">
+<div class="static bg-grey-dark">
   Static parent
-  <div class="absolute pin-b pin-l bg-slate-dark">
+  <div class="absolute pin-b pin-l bg-grey-darkest">
     Absolute child
   </div>
 </div>
@@ -102,19 +102,19 @@ Use `.relative` to position an element according to the normal flow of the docum
 Offsets are calculated relative to the element's normal position and the element *will* act as a position reference for absolutely positioned children.
 
 @component('_partials.code-sample')
-<div class="relative bg-smoke p-4">
-  <div class="relative h-32 bg-smoke-darker p-4 text-slate-darker">
+<div class="relative bg-grey-light p-4">
+  <div class="relative h-32 bg-grey-dark p-4 text-black">
     <p>Relative parent</p>
-    <div class="absolute pin-b pin-l bg-slate-dark p-4 text-smoke">
+    <div class="absolute pin-b pin-l bg-grey-darkest p-4 text-grey-light">
       <p>Absolute child</p>
     </div>
   </div>
 </div>
 
 @slot('code')
-<div class="relative bg-smoke-darker">
+<div class="relative bg-grey-dark">
   Relative parent
-  <div class="absolute pin-b pin-l bg-slate-dark">
+  <div class="absolute pin-b pin-l bg-grey-darkest">
     Absolute child
   </div>
 </div>
@@ -129,43 +129,43 @@ Offsets are calculated relative to the nearest parent that has a position other
 
 @component('_partials.code-sample')
 
-<p class="text-sm text-slate-light mb-1">With static positioning</p>
-<div class="relative bg-smoke px-4 pt-2 pb-4 mb-6">
-  <p class="mb-2 text-slate">Relative parent</p>
-  <div class="static bg-smoke-dark p-4 text-slate">
+<p class="text-sm text-grey-dark mb-1">With static positioning</p>
+<div class="relative bg-grey-light px-4 pt-2 pb-4 mb-6">
+  <p class="mb-2 text-grey-darker">Relative parent</p>
+  <div class="static bg-grey p-4 text-grey-darker">
     <p class="mb-2">Static parent</p>
-    <div class="static pin-b pin-l bg-slate-dark p-4 text-smoke inline-block">
+    <div class="static pin-b pin-l bg-grey-darkest p-4 text-grey-light inline-block">
       <p>Static child</p>
     </div>
-    <div class="bg-smoke p-4 text-slate inline-block">
+    <div class="bg-grey-light p-4 text-grey-darker inline-block">
       <p>Static sibling</p>
     </div>
   </div>
 </div>
 
-<p class="text-sm text-slate-light mb-1">With absolute positioning</p>
-<div class="relative bg-smoke px-4 pt-2 pb-4">
-  <p class="mb-2 text-slate">Relative parent</p>
-  <div class="static bg-smoke-dark p-4 text-slate">
+<p class="text-sm text-grey-dark mb-1">With absolute positioning</p>
+<div class="relative bg-grey-light px-4 pt-2 pb-4">
+  <p class="mb-2 text-grey-darker">Relative parent</p>
+  <div class="static bg-grey p-4 text-grey-darker">
     <p class="mb-2">Static parent</p>
-    <div class="absolute pin-t pin-r bg-slate-dark p-4 text-smoke inline-block">
+    <div class="absolute pin-t pin-r bg-grey-darkest p-4 text-grey-light inline-block">
       <p>Absolute child</p>
     </div>
-    <div class="bg-smoke p-4  text-slate inline-block">
+    <div class="bg-grey-light p-4  text-grey-darker inline-block">
       <p>Static sibling</p>
     </div>
   </div>
 </div>
 
 @slot('code')
-<div class="relative bg-smoke">
+<div class="relative bg-grey-light">
   Relative parent
-  <div class="static bg-smoke-darker">
+  <div class="static bg-grey-dark">
     Static parent
-    <div class="absolute pin-t pin-r bg-slate-dark">
+    <div class="absolute pin-t pin-r bg-grey-darkest">
       Absolute child
     </div>
-    <div class="bg-smoke inline-block">
+    <div class="bg-grey-light inline-block">
       Static sibling
     </div>
   </div>
@@ -181,21 +181,21 @@ Offsets are calculated relative to the viewport and the element *will* act as a
 
 @component('_partials.code-sample')
 <div class="rounded-b overflow-hidden max-w-md mx-auto mt-4 mb-4">
-  <div class="rounded-t border-t border-l border-r border-smoke bg-smoke-light flex px-4 py-3">
+  <div class="rounded-t border-t border-l border-r border-grey-light bg-grey-lighter flex px-4 py-3">
     <div class="mr-6">
-      <span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
-      <span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
-      <span class="inline-block rounded-full bg-smoke-dark h-3 w-3"></span>
+      <span class="inline-block rounded-full bg-grey h-3 w-3 mr-1"></span>
+      <span class="inline-block rounded-full bg-grey h-3 w-3 mr-1"></span>
+      <span class="inline-block rounded-full bg-grey h-3 w-3"></span>
     </div>
-    <div class="flex-1 bg-white border border-smoke rounded mr-4"></div>
+    <div class="flex-1 bg-white border border-grey-light rounded mr-4"></div>
   </div>
-  <div class="relative bg-smoke h-64">
+  <div class="relative bg-grey-light h-64">
 
     <!-- Hey fellow nerd! Yes, we're using position absolute instead of position fixed in the demo; it's the best way we could come up with to demonstrate how position fixed works without totally jacking up the layout of the entire documentation site. Forgive us! 😄 -->
 
-    <div class="absolute pin-l pin-r pin-t bg-slate-dark text-smoke z-10 px-4 py-3">
+    <div class="absolute pin-l pin-r pin-t bg-grey-darkest text-grey-light z-10 px-4 py-3">
       Fixed child
-      <div class="absolute pin-t pin-b pin-r px-4 py-3 bg-smoke-dark text-slate-dark">
+      <div class="absolute pin-t pin-b pin-r px-4 py-3 bg-grey text-grey-darkest">
         Absolute child
       </div>
     </div>
@@ -214,10 +214,10 @@ Offsets are calculated relative to the viewport and the element *will* act as a
 </div>
 
 @slot('code')
-<div class="bg-smoke pt-16">
-  <div class="fixed bg-smoke-darker">
+<div class="bg-grey-light pt-16">
+  <div class="fixed bg-grey-dark">
     Fixed child
-    <div class="absolute pin-t pin-r bg-slate-dark">
+    <div class="absolute pin-t pin-r bg-grey-darkest">
       Absolute child
     </div>
   </div>
@@ -237,12 +237,12 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin
 
 <div class="flex items-start mt-8 text-sm leading-none mb-8">
   <div class="pr-12">
-    <div class="mb-3 text-slate uppercase">Class</div>
+    <div class="mb-3 text-grey-darker uppercase">Class</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pin</code></div>
   </div>
   <div class="pl-12 pr-12 border-l">
-    <div class="mb-3 text-slate"><span class="uppercase">Edge</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+    <div class="mb-3 text-grey-darker"><span class="uppercase">Edge</span> <span class="text-grey-dark text-xs">(optional)</span></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter">&nbsp;</code> All <em class="text-xs text-grey-dark">(default)</em></div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
@@ -255,59 +255,59 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin
 @component('_partials.code-sample')
 <div class="flex justify-around mb-8">
   <div>
-    <p class="text-center text-sm text-slate-light mb-1">.pin-x.pin-t</p>
-    <div class="relative h-24 w-24 bg-smoke">
-      <div class="absolute pin-x pin-t h-8 bg-slate"></div>
+    <p class="text-center text-sm text-grey-dark mb-1">.pin-x.pin-t</p>
+    <div class="relative h-24 w-24 bg-grey-light">
+      <div class="absolute pin-x pin-t h-8 bg-grey-darker"></div>
     </div>
   </div>
   <div>
-    <p class="text-center text-sm text-slate-light mb-1">.pin-y.pin-r</p>
-    <div class="relative h-24 w-24 bg-smoke">
-      <div class="absolute pin-y pin-r w-8 bg-slate"></div>
+    <p class="text-center text-sm text-grey-dark mb-1">.pin-y.pin-r</p>
+    <div class="relative h-24 w-24 bg-grey-light">
+      <div class="absolute pin-y pin-r w-8 bg-grey-darker"></div>
     </div>
   </div>
   <div>
-    <p class="text-center text-sm text-slate-light mb-1">.pin-x.pin-b</p>
-    <div class="relative h-24 w-24 bg-smoke">
-      <div class="absolute pin-x pin-b h-8 bg-slate"></div>
+    <p class="text-center text-sm text-grey-dark mb-1">.pin-x.pin-b</p>
+    <div class="relative h-24 w-24 bg-grey-light">
+      <div class="absolute pin-x pin-b h-8 bg-grey-darker"></div>
     </div>
   </div>
   <div>
-    <p class="text-center text-sm text-slate-light mb-1">.pin-y.pin-l</p>
-    <div class="relative h-24 w-24 bg-smoke">
-      <div class="absolute pin-y pin-l w-8 bg-slate"></div>
+    <p class="text-center text-sm text-grey-dark mb-1">.pin-y.pin-l</p>
+    <div class="relative h-24 w-24 bg-grey-light">
+      <div class="absolute pin-y pin-l w-8 bg-grey-darker"></div>
     </div>
   </div>
   <div>
-    <p class="text-center text-sm text-slate-light mb-1">.pin</p>
-    <div class="relative h-24 w-24 bg-smoke">
-      <div class="absolute pin bg-slate"></div>
+    <p class="text-center text-sm text-grey-dark mb-1">.pin</p>
+    <div class="relative h-24 w-24 bg-grey-light">
+      <div class="absolute pin bg-grey-darker"></div>
     </div>
   </div>
 </div>
 <div class="flex justify-around">
   <div>
-    <p class="text-center text-sm text-slate-light mb-1">.pin-l.pin-t</p>
-    <div class="relative h-24 w-24 bg-smoke">
-      <div class="absolute pin-l pin-t h-8 w-8 bg-slate"></div>
+    <p class="text-center text-sm text-grey-dark mb-1">.pin-l.pin-t</p>
+    <div class="relative h-24 w-24 bg-grey-light">
+      <div class="absolute pin-l pin-t h-8 w-8 bg-grey-darker"></div>
     </div>
   </div>
   <div>
-    <p class="text-center text-sm text-slate-light mb-1">.pin-t.pin-r</p>
-    <div class="relative h-24 w-24 bg-smoke">
-      <div class="absolute pin-t pin-r h-8 w-8 bg-slate"></div>
+    <p class="text-center text-sm text-grey-dark mb-1">.pin-t.pin-r</p>
+    <div class="relative h-24 w-24 bg-grey-light">
+      <div class="absolute pin-t pin-r h-8 w-8 bg-grey-darker"></div>
     </div>
   </div>
   <div>
-    <p class="text-center text-sm text-slate-light mb-1">.pin-r.pin-b</p>
-    <div class="relative h-24 w-24 bg-smoke">
-      <div class="absolute pin-r pin-b h-8 w-8 bg-slate"></div>
+    <p class="text-center text-sm text-grey-dark mb-1">.pin-r.pin-b</p>
+    <div class="relative h-24 w-24 bg-grey-light">
+      <div class="absolute pin-r pin-b h-8 w-8 bg-grey-darker"></div>
     </div>
   </div>
   <div>
-    <p class="text-center text-sm text-slate-light mb-1">.pin-b.pin-l</p>
-    <div class="relative h-24 w-24 bg-smoke">
-      <div class="absolute pin-b pin-l h-8 w-8 bg-slate"></div>
+    <p class="text-center text-sm text-grey-dark mb-1">.pin-b.pin-l</p>
+    <div class="relative h-24 w-24 bg-grey-light">
+      <div class="absolute pin-b pin-l h-8 w-8 bg-grey-darker"></div>
     </div>
   </div>
   <div class="relative h-24 w-24 opacity-0"></div>
@@ -315,48 +315,48 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin
 
 @slot('code')
 <!-- Span top edge -->
-<div class="relative h-24 w-24 bg-smoke">
-  <div class="absolute pin-x pin-t h-8 bg-slate"></div>
+<div class="relative h-24 w-24 bg-grey-light">
+  <div class="absolute pin-x pin-t h-8 bg-grey-darker"></div>
 </div>
 
 <!-- Span right edge -->
-<div class="relative h-24 w-24 bg-smoke">
-  <div class="absolute pin-y pin-r w-8 bg-slate"></div>
+<div class="relative h-24 w-24 bg-grey-light">
+  <div class="absolute pin-y pin-r w-8 bg-grey-darker"></div>
 </div>
 
 <!-- Span bottom edge -->
-<div class="relative h-24 w-24 bg-smoke">
-  <div class="absolute pin-x pin-b h-8 bg-slate"></div>
+<div class="relative h-24 w-24 bg-grey-light">
+  <div class="absolute pin-x pin-b h-8 bg-grey-darker"></div>
 </div>
 
 <!-- Span left edge -->
-<div class="relative h-24 w-24 bg-smoke">
-  <div class="absolute pin-y pin-l bg-slate"></div>
+<div class="relative h-24 w-24 bg-grey-light">
+  <div class="absolute pin-y pin-l bg-grey-darker"></div>
 </div>
 
 <!-- Fill entire parent -->
-<div class="relative h-24 w-24 bg-smoke">
-  <div class="absolute pin bg-slate"></div>
+<div class="relative h-24 w-24 bg-grey-light">
+  <div class="absolute pin bg-grey-darker"></div>
 </div>
 
 <!-- Pin to top left corner -->
-<div class="relative h-24 w-24 bg-smoke">
-  <div class="absolute pin-l pin-t h-8 w-8 bg-slate"></div>
+<div class="relative h-24 w-24 bg-grey-light">
+  <div class="absolute pin-l pin-t h-8 w-8 bg-grey-darker"></div>
 </div>
 
 <!-- Pin to top right corner -->
-<div class="relative h-24 w-24 bg-smoke">
-  <div class="absolute pin-t pin-r h-8 w-8 bg-slate"></div>
+<div class="relative h-24 w-24 bg-grey-light">
+  <div class="absolute pin-t pin-r h-8 w-8 bg-grey-darker"></div>
 </div>
 
 <!-- Pin to bottom right corner -->
-<div class="relative h-24 w-24 bg-smoke">
-  <div class="absolute pin-b pin-r h-8 w-8 bg-slate"></div>
+<div class="relative h-24 w-24 bg-grey-light">
+  <div class="absolute pin-b pin-r h-8 w-8 bg-grey-darker"></div>
 </div>
 
 <!-- Pin to bottom left corner -->
-<div class="relative h-24 w-24 bg-smoke">
-  <div class="absolute pin-b pin-l h-8 w-8 bg-slate"></div>
+<div class="relative h-24 w-24 bg-grey-light">
+  <div class="absolute pin-b pin-l h-8 w-8 bg-grey-darker"></div>
 </div>
 @endslot
 @endcomponent
@@ -369,37 +369,37 @@ For more information about Tailwind's responsive design features, check out the
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="relative h-32 bg-smoke p-4">
-  <div class="relative bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
+<div class="relative h-32 bg-grey-light p-4">
+  <div class="relative bg-grey-darkest p-4 text-grey">Responsive element</div>
 </div>
 @endslot
 
 @slot('sm')
-<div class="relative h-32 bg-smoke p-4">
-  <div class="absolute pin-b pin-l bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
+<div class="relative h-32 bg-grey-light p-4">
+  <div class="absolute pin-b pin-l bg-grey-darkest p-4 text-grey">Responsive element</div>
 </div>
 @endslot
 
 @slot('md')
-<div class="relative h-32 bg-smoke p-4">
-  <div class="absolute pin-t pin-x bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
+<div class="relative h-32 bg-grey-light p-4">
+  <div class="absolute pin-t pin-x bg-grey-darkest p-4 text-grey">Responsive element</div>
 </div>
 @endslot
 
 @slot('lg')
-<div class="relative h-32 bg-smoke p-4">
-  <div class="absolute pin-r pin-y bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
+<div class="relative h-32 bg-grey-light p-4">
+  <div class="absolute pin-r pin-y bg-grey-darkest p-4 text-grey">Responsive element</div>
 </div>
 @endslot
 
 @slot('xl')
-<div class="relative h-32 bg-smoke p-4">
-  <div class="absolute pin-b pin-x bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
+<div class="relative h-32 bg-grey-light p-4">
+  <div class="absolute pin-b pin-x bg-grey-darkest p-4 text-grey">Responsive element</div>
 </div>
 @endslot
 
 @slot('code')
-<div class="relative h-32 bg-smoke p-4">
+<div class="relative h-32 bg-grey-light p-4">
   <div class="none:relative sm:absolute sm:pin-b sm:pin-l md:pin-t md:pin-x lg:pin-r lg:pin-y xl:pin-b xl:pin-x"></div>
 </div>
 @endslot
diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md
index 46de97295..5dc2a2ad4 100644
--- a/docs/source/docs/shadows.blade.md
+++ b/docs/source/docs/shadows.blade.md
@@ -61,7 +61,7 @@ Use the `.shadow-inner` utility to apply a subtle inset box shadow to an element
 This can be useful for things like form controls or wells.
 
 @component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
-<div class="p-4 bg-smoke-lighter shadow-inner">.shadow-inner</div>
+<div class="p-4 bg-grey-lightest shadow-inner">.shadow-inner</div>
 @slot('code')
 <div class="shadow-inner"></div>
 @endslot
@@ -89,27 +89,27 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow-md px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow-lg px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow-inner px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
+  <div class="shadow-none px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md
index 825683d41..ebc99e9bc 100644
--- a/docs/source/docs/spacing.blade.md
+++ b/docs/source/docs/spacing.blade.md
@@ -17,14 +17,14 @@ For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.m
 
 <div class="flex items-start mt-8 text-sm">
   <div class="pr-12">
-    <div class="mb-3 text-slate uppercase">Class</div>
+    <div class="mb-3 text-grey-darker uppercase">Class</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">-m</code> Negative Margin</div>
   </div>
   <div class="pl-12 pr-12 border-l">
-    <div class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+    <div class="mb-3 text-grey-darker"><span class="uppercase">Side</span> <span class="text-grey-dark text-xs">(optional)</span></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter">&nbsp;</code> All <em class="text-xs text-grey-dark">(default)</em></div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
@@ -33,7 +33,7 @@ For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.m
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
   </div>
   <div class="pl-12 border-l">
-    <div class="mb-3 text-slate uppercase">Space</div>
+    <div class="mb-3 text-grey-darker uppercase">Space</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
@@ -42,7 +42,7 @@ For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.m
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
     <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">px</code> 1px</div>
-    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">auto</code> auto <span class="text-slate-light text-xs">(margins only)</span></div>
+    <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">auto</code> auto <span class="text-grey-dark text-xs">(margins only)</span></div>
   </div>
 </div>
 
@@ -59,7 +59,7 @@ For example, this config will _also_ generate hover and focus variants of the ma
 ```js
 {
     // ...
-    modules: { 
+    modules: {
         // ...
         margin: ['responsive', 'hover', 'focus'],
         negativeMargin: ['responsive', 'hover'],
diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md
index 625a199af..940bbc54b 100644
--- a/docs/source/docs/visibility.blade.md
+++ b/docs/source/docs/visibility.blade.md
@@ -24,12 +24,12 @@ features:
   ]
 ])
 
-### Visible <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
+### Visible <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
 
 Use `.visible` to make an element visible. This will typically be used as a reset when using the `.invisible` utility.
 
 @component('_partials.code-sample', ['class' => 'flex justify-center'])
-<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
+<div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
 @endcomponent
 
 ### Invisible
@@ -37,7 +37,7 @@ Use `.visible` to make an element visible. This will typically be used as a rese
 Use `.invisible` to hide an element, but still maintain its space.
 
 @component('_partials.code-sample', ['class' => 'flex justify-center'])
-<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
+<div class="invisible bg-grey-light w-24 h-24 rounded-full"></div>
 @endcomponent
 
 ## Responsive
@@ -49,27 +49,27 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-  <div class="visible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-  <div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="invisible bg-grey-light w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-  <div class="visible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-  <div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="invisible bg-grey-light w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-  <div class="visible bg-smoke w-24 h-24 rounded-full"></div>
+  <div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/docs/what-is-tailwind.blade.md b/docs/source/docs/what-is-tailwind.blade.md
index f35167dc6..af1356fa0 100644
--- a/docs/source/docs/what-is-tailwind.blade.md
+++ b/docs/source/docs/what-is-tailwind.blade.md
@@ -105,38 +105,38 @@ Tailwind uses an intuitive `{screen}:` prefix that makes it easy to notice respo
 
 @component('_partials.responsive-code-sample')
 @slot('none')
-<div class="flex justify-start bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-start bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('sm')
-<div class="flex justify-center bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-center bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('md')
-<div class="flex justify-end bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-end bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('lg')
-<div class="flex justify-between bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-between bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('xl')
-<div class="flex justify-around bg-smoke-light">
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
-  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+<div class="flex justify-around bg-grey-lighter">
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
+  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
 </div>
 @endslot
 @slot('code')
diff --git a/docs/source/index.blade.php b/docs/source/index.blade.php
index 42c0f68ac..0662d19c4 100644
--- a/docs/source/index.blade.php
+++ b/docs/source/index.blade.php
@@ -17,7 +17,7 @@
 @section('body')
 
 <div class="flex flex-col">
-  <div class="min-h-screen bg-pattern bg-center bg-smoke-light border-t-6 border-tailwind-teal flex items-center justify-center leading-tight p-6 pb-16">
+  <div class="min-h-screen bg-pattern bg-center bg-grey-lighter border-t-6 border-tailwind-teal flex items-center justify-center leading-tight p-6 pb-16">
     <div>
       <div>
         <svg class="mx-auto block h-24 mb-3" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="b" cx="40" cy="40" r="40"/><filter x="-8.8%" y="-6.2%" width="117.5%" height="117.5%" filterUnits="objectBoundingBox" id="a"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" in="shadowBlurOuter1"/></filter><linearGradient x1="0%" y1="0%" y2="100%" id="c"><stop stop-color="#2383AE" offset="0%"/><stop stop-color="#6DD7B9" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(5 5)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" xlink:href="#b"/></g><path d="M25.6 33.92C27.52 26.24 32.32 22.4 40 22.4c11.52 0 12.96 8.64 18.72 10.08 3.84.96 7.2-.48 10.08-4.32-1.92 7.68-6.72 11.52-14.4 11.52-11.52 0-12.96-8.64-18.72-10.08-3.84-.96-7.2.48-10.08 4.32zM11.2 51.2c1.92-7.68 6.72-11.52 14.4-11.52 11.52 0 12.96 8.64 18.72 10.08 3.84.96 7.2-.48 10.08-4.32-1.92 7.68-6.72 11.52-14.4 11.52-11.52 0-12.96-8.64-18.72-10.08-3.84-.96-7.2.48-10.08 4.32z" fill="url(#c)" transform="translate(5 5)"/></g></svg>
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 2d635826d..732b7072a 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -1,18 +1,6 @@
 var config = require('../defaultConfig')()
 
 config.colors = Object.assign(config.colors, {
-  'slate-darker': '#212b35',
-  'slate-dark': '#404e5c',
-  'slate': '#647382',
-  'slate-light': '#919eab',
-  'slate-lighter': '#c5ced6',
-
-  'smoke-darker': '#919eab',
-  'smoke-dark': '#c5ced6',
-  'smoke': '#dfe3e8',
-  'smoke-light': 'hsl(200, 33%, 96%)',
-  'smoke-lighter': 'hsl(200, 25%, 98%)',
-
   'tailwind-teal-light': '#5ebcca',
   'tailwind-teal': '#44a8b3',
   'tailwind-teal-dark': '#2f8696',