diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css
index a77aed872..b354ee328 100644
--- a/__tests__/fixtures/tailwind.css
+++ b/__tests__/fixtures/tailwind.css
@@ -540,7 +540,11 @@ svg {
   fill: currentColor;
 }
 
-input {
+button,
+input,
+optgroup,
+select,
+textarea {
   font-family: inherit;
 }
 
diff --git a/css/preflight.css b/css/preflight.css
index d3b668085..4be97e1db 100644
--- a/css/preflight.css
+++ b/css/preflight.css
@@ -87,7 +87,7 @@ img { max-width: 100%; }
 
 svg { fill: currentColor; }
 
-input { font-family: inherit; }
+button, input, optgroup, select, textarea { font-family: inherit; }
 
 input::placeholder {
     color: inherit;
diff --git a/docs/source/_assets/less/base.less b/docs/source/_assets/less/base.less
index 1cdee3d8d..e9cc60cbd 100644
--- a/docs/source/_assets/less/base.less
+++ b/docs/source/_assets/less/base.less
@@ -1,54 +1,16 @@
 @tailwind reset;
 
 html {
-  @apply .bg-brand-soft;
-
   font-size: 12px;
 
-  // Changes the default tap highlight to be completely transparent in iOS.
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-
-  // -webkit-font-smoothing: antialiased;
-
   @media (min-width: 420px) {
     font-size: 16px;
   }
 }
 
-*,
-*::before,
-*::after {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  @apply .font-sans;
-  @apply .text-base;
-  @apply .font-normal;
-  @apply .text-slate-darker;
-  line-height: 1.5;
-}
-
-pre, code {
-  @apply .font-mono;
-}
-
-img {
-  vertical-align: middle;
-}
-
 a {
   color: inherit;
   text-decoration: none;
-
-  &:hover {
-    @apply .underline;
-  }
-}
-
-svg {
-  fill: currentColor;
 }
 
 ol, ul {
diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less
index a22c76be3..a491ca0c3 100644
--- a/docs/source/_assets/less/markdown.less
+++ b/docs/source/_assets/less/markdown.less
@@ -8,7 +8,7 @@
     .subnav-link, .subnav-link& {
       @apply .mr-6;
       @apply .leading-none;
-      @apply .text-slate;
+      @apply .text-slate-dark;
       @apply .text-sm;
     }
   }
@@ -38,11 +38,12 @@
 
   > pre, pre& {
     @apply .font-mono;
+    @apply .font-normal;
   }
 
   > blockquote, blockquote& {
     @apply .italic;
-    @apply .text-slate;
+    @apply .text-slate-dark;
     @apply .text-sm;
   }
 
@@ -50,7 +51,7 @@
     @apply .mb-4;
     @apply .leading-none;
     @apply .text-slate-darker;
-    @apply .font-bold;
+    @apply .font-semibold;
     @apply .text-3xl;
   }
 
@@ -59,7 +60,7 @@
     @apply .mb-8;
     @apply .text-slate-darker;
     @apply .leading-none;
-    @apply .font-bold;
+    @apply .font-semibold;
     @apply .text-xl;
   }
 
@@ -73,14 +74,14 @@
   }
 
   > p, p&, > blockquote > p {
-    @apply .text-slate;
+    @apply .text-slate-dark;
     @apply .mt-4;
     @apply .mb-4;
     line-height: 1.75;
   }
 
   > ul, > ol {
-    @apply .text-slate;
+    @apply .text-slate-dark;
     margin: 0 0 2em;
   }
 
@@ -94,7 +95,7 @@
 
   > li {
     @apply .my-2;
-    @apply .text-slate;
+    @apply .text-slate-dark;
   }
 
   > :not(pre) > code[class*="language-"], > pre[class*="language-"], pre[class*="language-"]& {
diff --git a/docs/source/_assets/less/prism.less b/docs/source/_assets/less/prism.less
index 3d0f09378..9cae792bb 100644
--- a/docs/source/_assets/less/prism.less
+++ b/docs/source/_assets/less/prism.less
@@ -7,10 +7,12 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
+    @apply .font-mono;
+
     color: black;
     background: none;
     text-shadow: 0 1px white;
-    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    // font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     text-align: left;
     white-space: pre;
     word-spacing: normal;
@@ -74,7 +76,8 @@ pre[class*="language-"] {
 }
 
 .token.punctuation {
-    color: #999;
+    @apply .text-blue-dark;
+    // color: #999;
 }
 
 .namespace {
@@ -88,17 +91,18 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-    color: #905;
+    @apply .text-blue-dark;
+    // color: #905;
 }
 
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-    color: #690;
-}
+// .token.selector,
+// .token.attr-name,
+// .token.string,
+// .token.char,
+// .token.builtin,
+// .token.inserted {
+//     color: #690;
+// }
 
 .token.operator,
 .token.entity,
@@ -112,7 +116,8 @@ pre[class*="language-"] {
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-    color: #07a;
+    @apply .text-purple-dark;
+    // color: #07a;
 }
 
 .token.function {
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 299c657f4..3b3ba7a38 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -1,165 +1,166 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="bg-brand-soft antialiased">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <meta http-equiv="x-ua-compatible" content="ie=edge">
         <title>{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS' }}</title>
+        <style>
+          @import url("https://use.typekit.net/iqy1okj.css");
+        </style>
+        {{-- <link rel="stylesheet" href="https://use.typekit.net/iqy1okj.css"> --}}
         <link rel="stylesheet" href="/css/main.css">
         <script type="text/javascript" src="/js/prism.js" defer=""></script>
     </head>
-    <body class="pb-12">
-        <div class="bg-gradient-brand h-3"></div>
-        <header class="container">
-            <div class="py-6 flex items-center justify-between">
-                <div class="flex items-center">
-                    <div class="rounded-pill h-12 w-12 bg-white p-2 inline-flex items-center justify-center shadow-md mr-4">
-                        <svg class="fit w-full" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
+    <body class="font-sans font-normal text-slate-darker leading-normal">
+        <div class="h-screen flex">
+            <div class="bg-white w-full max-w-xs flex-none overflow-scroll-y p-8 border-r-2 border-smoke">
+                <div class="flex items-center mb-8">
+                    <svg class="h-8 w-8 mr-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
+                    <span class='text-xl font-bold'>Tailwind CSS</span>
+                    {{-- <svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS"> --}}
+                        {{-- <title>Tailwind CSS</title> --}}
+                        {{-- <path d="M8.638 18h-3.01V3.645H.563V1.09H13.69v2.555H8.637V18zm8.456-2.004c1.652 0 2.976-1.1 2.976-2.6v-.95l-2.87.175c-1.407.095-2.216.728-2.216 1.712 0 1.02.844 1.664 2.11 1.664zm-.88 2.203c-2.4 0-4.148-1.512-4.148-3.75 0-2.204 1.7-3.528 4.723-3.716l3.28-.187v-.89c0-1.302-.88-2.052-2.32-2.052-1.383 0-2.262.668-2.45 1.7h-2.706c.13-2.32 2.11-3.985 5.273-3.985 3.082 0 5.086 1.63 5.086 4.125V18H20.14v-1.98h-.058c-.715 1.347-2.273 2.18-3.867 2.18zm9.153-.2h2.918V5.578h-2.918V18zM26.82 3.95c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM30.816 18h2.918V1.09h-2.918V18zM53.07 5.578h-2.883l-2.097 9.54h-.07l-2.426-9.54h-2.8l-2.427 9.54h-.058l-2.1-9.54h-2.93L38.646 18h3.046l2.44-9.082h.057L46.638 18h3.07L53.07 5.578zM54.594 18h2.918V5.578h-2.918V18zm1.453-14.05c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM59.96 18h2.92v-7.195c0-1.782 1.065-2.99 2.74-2.99 1.665 0 2.485.986 2.485 2.744V18h2.918V9.973c0-2.87-1.558-4.63-4.3-4.63-1.91 0-3.235.89-3.903 2.368h-.058V5.58h-2.8V18zm18.036.2c-3.13 0-5.156-2.473-5.156-6.423 0-3.925 2.027-6.41 5.156-6.41 1.78 0 3.188.926 3.844 2.297h.07V1.09h2.918V18h-2.86v-2.12h-.046c-.68 1.393-2.11 2.32-3.926 2.32zm.88-10.43c-1.876 0-3.048 1.558-3.048 4.02 0 2.472 1.16 4.02 3.047 4.02 1.84 0 3.047-1.56 3.047-4.02 0-2.438-1.207-4.02-3.047-4.02zm20.788 10.51c3.996 0 6.762-2.19 7.29-5.81h-2.966c-.468 2.038-2.074 3.245-4.312 3.245-2.93 0-4.78-2.38-4.78-6.176 0-3.774 1.862-6.165 4.768-6.165 2.19 0 3.914 1.395 4.313 3.516h2.976c-.375-3.632-3.363-6.08-7.29-6.08-4.804 0-7.862 3.338-7.862 8.73 0 5.425 3.036 8.74 7.864 8.74zm8.283-5.038c.13 3.117 2.683 5.04 6.574 5.04 4.09 0 6.67-2.016 6.67-5.227 0-2.52-1.454-3.938-4.888-4.723l-1.945-.445c-2.074-.492-2.93-1.15-2.93-2.274 0-1.406 1.29-2.343 3.2-2.343 1.933 0 3.257.95 3.398 2.53h2.883c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.477 3.914 4.594 4.63l2.192.514c2.133.504 3 1.207 3 2.426 0 1.406-1.418 2.414-3.457 2.414-2.062 0-3.62-1.02-3.808-2.578h-2.93zm14.424 0c.13 3.117 2.685 5.04 6.575 5.04 4.09 0 6.668-2.016 6.668-5.227 0-2.52-1.453-3.938-4.886-4.723l-1.946-.445c-2.073-.492-2.928-1.15-2.928-2.274 0-1.406 1.29-2.343 3.2-2.343 1.932 0 3.257.95 3.397 2.53h2.882c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.478 3.914 4.595 4.63l2.19.514c2.134.504 3 1.207 3 2.426 0 1.406-1.417 2.414-3.456 2.414-2.063 0-3.622-1.02-3.81-2.578h-2.93z" fill="#3A3F46" fill-rule="evenodd"></path> --}}
+                    {{-- </svg> --}}
+                </div>
+                <div class="mb-8">
+                    <div class="relative">
+                        <input class="rounded bg-smoke-light border-0 py-2 pr-4 pl-10 block w-full" type="text" placeholder="Search">
+                        <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
+                            <svg class="pointer-events-none text-slate 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>
-                    <svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS">
-                        <title>Tailwind CSS</title>
-                        <path d="M8.638 18h-3.01V3.645H.563V1.09H13.69v2.555H8.637V18zm8.456-2.004c1.652 0 2.976-1.1 2.976-2.6v-.95l-2.87.175c-1.407.095-2.216.728-2.216 1.712 0 1.02.844 1.664 2.11 1.664zm-.88 2.203c-2.4 0-4.148-1.512-4.148-3.75 0-2.204 1.7-3.528 4.723-3.716l3.28-.187v-.89c0-1.302-.88-2.052-2.32-2.052-1.383 0-2.262.668-2.45 1.7h-2.706c.13-2.32 2.11-3.985 5.273-3.985 3.082 0 5.086 1.63 5.086 4.125V18H20.14v-1.98h-.058c-.715 1.347-2.273 2.18-3.867 2.18zm9.153-.2h2.918V5.578h-2.918V18zM26.82 3.95c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM30.816 18h2.918V1.09h-2.918V18zM53.07 5.578h-2.883l-2.097 9.54h-.07l-2.426-9.54h-2.8l-2.427 9.54h-.058l-2.1-9.54h-2.93L38.646 18h3.046l2.44-9.082h.057L46.638 18h3.07L53.07 5.578zM54.594 18h2.918V5.578h-2.918V18zm1.453-14.05c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM59.96 18h2.92v-7.195c0-1.782 1.065-2.99 2.74-2.99 1.665 0 2.485.986 2.485 2.744V18h2.918V9.973c0-2.87-1.558-4.63-4.3-4.63-1.91 0-3.235.89-3.903 2.368h-.058V5.58h-2.8V18zm18.036.2c-3.13 0-5.156-2.473-5.156-6.423 0-3.925 2.027-6.41 5.156-6.41 1.78 0 3.188.926 3.844 2.297h.07V1.09h2.918V18h-2.86v-2.12h-.046c-.68 1.393-2.11 2.32-3.926 2.32zm.88-10.43c-1.876 0-3.048 1.558-3.048 4.02 0 2.472 1.16 4.02 3.047 4.02 1.84 0 3.047-1.56 3.047-4.02 0-2.438-1.207-4.02-3.047-4.02zm20.788 10.51c3.996 0 6.762-2.19 7.29-5.81h-2.966c-.468 2.038-2.074 3.245-4.312 3.245-2.93 0-4.78-2.38-4.78-6.176 0-3.774 1.862-6.165 4.768-6.165 2.19 0 3.914 1.395 4.313 3.516h2.976c-.375-3.632-3.363-6.08-7.29-6.08-4.804 0-7.862 3.338-7.862 8.73 0 5.425 3.036 8.74 7.864 8.74zm8.283-5.038c.13 3.117 2.683 5.04 6.574 5.04 4.09 0 6.67-2.016 6.67-5.227 0-2.52-1.454-3.938-4.888-4.723l-1.945-.445c-2.074-.492-2.93-1.15-2.93-2.274 0-1.406 1.29-2.343 3.2-2.343 1.933 0 3.257.95 3.398 2.53h2.883c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.477 3.914 4.594 4.63l2.192.514c2.133.504 3 1.207 3 2.426 0 1.406-1.418 2.414-3.457 2.414-2.062 0-3.62-1.02-3.808-2.578h-2.93zm14.424 0c.13 3.117 2.685 5.04 6.575 5.04 4.09 0 6.668-2.016 6.668-5.227 0-2.52-1.453-3.938-4.886-4.723l-1.946-.445c-2.073-.492-2.928-1.15-2.928-2.274 0-1.406 1.29-2.343 3.2-2.343 1.932 0 3.257.95 3.397 2.53h2.882c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.478 3.914 4.595 4.63l2.19.514c2.134.504 3 1.207 3 2.426 0 1.406-1.417 2.414-3.456 2.414-2.063 0-3.622-1.02-3.81-2.578h-2.93z" fill="#3A3F46" fill-rule="evenodd"></path>
-                    </svg>
-                </div>
-                <div>
-                    <a class="font-semibold text-slate-light" href="https://github.com/adamwathan/tailwindcss">GitHub</a>
                 </div>
+                <nav class="py-4 text-base">
+                    <div class="mb-8">
+                        <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Introduction</p>
+                        <ul>
+                            <li class="mb-3"><a class="text-slate" href="{{ $page->baseUrl }}/what-is-tailwind">What is Tailwind?</a></li>
+                        </ul>
+                    </div>
+                    <div class="mb-8">
+                        <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Getting Started</p>
+                        <ul>
+                            <li class="mb-3"><a class="text-slate" href="{{ $page->baseUrl }}/installation">Installation</a></li>
+                            <li class="mb-3">
+                                <a class="{{ $page->active('/configuration') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/configuration">
+                                    Configuration
+                                </a>
+                            </li>
+                            <li class="mb-3">
+                                <a class="{{ $page->active('/color-palette') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
+                                    Color Palette
+                                </a>
+                            </li>
+                            <li class="mb-3">
+                                <a class="{{ $page->active('/responsive-design') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
+                                    Responsive Design
+                                </a>
+                            </li>
+                            <li class="mb-3">
+                                <a class="{{ $page->active('/adding-new-utilities') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
+                                    Adding New Utilities
+                                </a>
+                            </li>
+                            <li class="mb-3">
+                                <a class="{{ $page->active('/extracting-components') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
+                                    Extracting Components
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="mt-8">
+                        <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Styles</p>
+                        <ul class="mb-8">
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Base</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Alignment</a></li>
+                            <li class="mb-3">
+                                <a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Backgrounds</a>
+                                <ul class="pl-4 {{ $page->active('/backgrounds/') ? 'block' : 'hidden' }}">
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Color</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Position</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Size</a></li>
+                                </ul>
+                            </li>
+                            <li class="mb-3">
+                                <a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Borders</a>
+                                <ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Base</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Color</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Style</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Radius</a></li>
+                                </ul>
+                            </li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/buttons') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Buttons</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Container</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Display</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox" class="{{ $page->active('/flexbox') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Flexbox</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/floats') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Floats</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/forms') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Forms</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/grid') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Grid</a></li>
+                            <li class="mb-3">
+                                <a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Interactivity</a>
+                                <ul class="pl-4 {{ $page->active('/interactivity/') ? 'block' : 'hidden' }}">
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Cursor</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/resize') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Resize</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Pointer Events</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">User Select</a></li>
+                                </ul>
+                            </li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/lists" class="{{ $page->active('/lists') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Lists</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Opacity</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Overflow</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Positioning</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Shadows</a></li>
+                            <li class="mb-3">
+                                <a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Sizing</a>
+                                <ul class="pl-4 {{ $page->active('/sizing/') ? 'block' : 'hidden' }}">
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Width</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Min-Width</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Max-Width</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Height</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Min-Height</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Max-Height</a></li>
+                                </ul>
+                            </li>
+                            <li class="mb-3">
+                                <a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Spacing</a>
+                                <ul class="pl-4 {{ $page->active('/spacing/') ? 'block' : 'hidden' }}">
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Padding</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Margin</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Negative Margin</a></li>
+                                </ul>
+                            </li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">SVG</a></li>
+                            <li class="mb-3">
+                                <a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Typography</a>
+                                <ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Fonts</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Color</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Sizing</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Weight</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Line Height</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Letter Spacing</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Wrapping</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Style &amp; Decoration</a></li>
+                                </ul>
+                            </li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/visibility') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Visibility</a></li>
+                            <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Z-Index</a></li>
+                        </ul>
+                    </div>
+                    <div class="mb-8">
+                        <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Examples</p>
+                        <ul>
+                            <li class="mb-3"><a class="{{ $page->getUrl() === '/examples/alerts' ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
+                            <li class="mb-3"><a class="{{ $page->getUrl() === '/examples/cards' ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
+                        </ul>
+                    </div>
+                </nav>
             </div>
-        </header>
-        <div class="container">
-            <div class="flex flex-wrap">
-                <div class="w-full lg:w-1/4">
-                    <nav class="py-4 text-base">
-                        <div class="mb-8">
-                            <p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Introduction</p>
-                            <ul>
-                                <li class="mb-2"><a class="text-slate" href="{{ $page->baseUrl }}/what-is-tailwind">What is Tailwind?</a></li>
-                            </ul>
-                        </div>
-                        <div class="mb-8">
-                            <p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Getting Started</p>
-                            <ul>
-                                <li class="mb-2"><a class="text-slate" href="{{ $page->baseUrl }}/installation">Installation</a></li>
-                                <li class="mb-2">
-                                    <a class="{{ $page->active('/configuration') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/configuration">
-                                        Configuration
-                                    </a>
-                                </li>
-                                <li class="mb-2">
-                                    <a class="{{ $page->active('/color-palette') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
-                                        Color Palette
-                                    </a>
-                                </li>
-                                <li class="mb-2">
-                                    <a class="{{ $page->active('/responsive-design') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
-                                        Responsive Design
-                                    </a>
-                                </li>
-                                <li class="mb-2">
-                                    <a class="{{ $page->active('/adding-new-utilities') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
-                                        Adding New Utilities
-                                    </a>
-                                </li>
-                                <li class="mb-2">
-                                    <a class="{{ $page->active('/extracting-components') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
-                                        Extracting Components
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="mt-8">
-                            <p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Styles</p>
-                            <ul class="mb-8">
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Base</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Alignment</a></li>
-                                <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Backgrounds</a>
-                                    <ul class="pl-4 {{ $page->active('/backgrounds/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Color</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Position</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Size</a></li>
-                                    </ul>
-                                </li>
-                                <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Borders</a>
-                                    <ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Base</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Color</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Style</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Radius</a></li>
-                                    </ul>
-                                </li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/buttons') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Buttons</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Container</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Display</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/flexbox" class="{{ $page->active('/flexbox') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Flexbox</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/floats') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Floats</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/forms') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Forms</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/grid') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Grid</a></li>
-                                <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Interactivity</a>
-                                    <ul class="pl-4 {{ $page->active('/interactivity/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Cursor</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/resize') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Resize</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Pointer Events</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-slate-darker font-semibold' : 'text-slate' }}">User Select</a></li>
-                                    </ul>
-                                </li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/lists" class="{{ $page->active('/lists') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Lists</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Opacity</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Overflow</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Positioning</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Shadows</a></li>
-                                <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Sizing</a>
-                                    <ul class="pl-4 {{ $page->active('/sizing/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Width</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Min-Width</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Max-Width</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Height</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Min-Height</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Max-Height</a></li>
-                                    </ul>
-                                </li>
-                                <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Spacing</a>
-                                    <ul class="pl-4 {{ $page->active('/spacing/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Padding</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Margin</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Negative Margin</a></li>
-                                    </ul>
-                                </li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-slate-darker font-semibold' : 'text-slate' }}">SVG</a></li>
-                                <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Typography</a>
-                                    <ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Fonts</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Color</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Sizing</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Weight</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Line Height</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Letter Spacing</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Wrapping</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Style &amp; Decoration</a></li>
-                                    </ul>
-                                </li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/visibility') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Visibility</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Z-Index</a></li>
-                            </ul>
-                        </div>
-                        <div class="mb-8">
-                            <p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Examples</p>
-                            <ul>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/examples/alerts' ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/examples/cards' ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
-                            </ul>
-                        </div>
-                    </nav>
-                </div>
-                <div class="w-full lg:w-3/4">
-                    <div class="p-12 rounded-lg bg-white shadow-md">
-                        @yield('body')
-                    </div>
+            <div class="bg-smoke-light flex-grow overflow-scroll-y">
+                <div class="px-6 py-8 w-full max-w-xl mx-auto">
+                    @yield('body')
                 </div>
             </div>
         </div>
diff --git a/docs/source/_partials/code-sample.blade.php b/docs/source/_partials/code-sample.blade.php
index 710241377..8002352be 100644
--- a/docs/source/_partials/code-sample.blade.php
+++ b/docs/source/_partials/code-sample.blade.php
@@ -1,5 +1,5 @@
-<div class="border border-smoke rounded mask mb-4">
-  <div class="p-6 border-b border-smoke {{ $class ?? '' }}">
+<div class="rounded mask shadow mb-4">
+  <div class="bg-white border-b-2 border-smoke p-6 {{ $class ?? '' }}">
     {{ $slot }}
   </div>
   <div>
diff --git a/docs/source/examples/alerts.blade.md b/docs/source/examples/alerts.blade.md
index 9cacbc141..2f2710d04 100644
--- a/docs/source/examples/alerts.blade.md
+++ b/docs/source/examples/alerts.blade.md
@@ -13,7 +13,7 @@ Here's a bunch of examples:
 
 @component('_partials.code-sample', ['lang' => 'html'])
 <div class="bg-red-lighter border border-red-light text-red px-4 py-3 rounded relative">
-  <strong>Holy smokes!</strong> Something seriously bad happened.
+  <strong class="font-bold">Holy smokes!</strong> Something seriously bad happened.
   <span class="absolute pin-t pin-b pin-r px-4 py-3">
     <svg class="h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
   </span>
@@ -68,7 +68,7 @@ Here's a bunch of examples:
   <div class="flex">
     <svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
     <div>
-      <p class="font-semibold">Our privacy policy has changed</p>
+      <p class="font-bold">Our privacy policy has changed</p>
       <p class="text-sm">Make sure you know how these changes affect you.</p>
     </div>
   </div>
diff --git a/docs/source/styles/backgrounds/color.md b/docs/source/styles/backgrounds/color.md
index d182672b0..4a9b82bf4 100644
--- a/docs/source/styles/backgrounds/color.md
+++ b/docs/source/styles/backgrounds/color.md
@@ -17,39 +17,39 @@ title: "Backgrounds"
 <div class="flex flex-wrap -mx-4 mb-4">
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-slate-darker px-6 py-4 text-sm">
-        .bg-slate-darker
-      </div>
-      <div class="text-white bg-slate-dark px-6 py-4 text-sm">
-        .bg-slate-dark
-      </div>
-      <div class="text-white bg-slate px-6 py-4 text-sm">
-        .bg-slate
+      <div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
+        .bg-slate-lighter
       </div>
       <div class="text-white bg-slate-light px-6 py-4 text-sm">
         .bg-slate-light
       </div>
-      <div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
-        .bg-slate-lighter
+      <div class="text-white bg-slate px-6 py-4 text-sm">
+        .bg-slate
+      </div>
+      <div class="text-white bg-slate-dark px-6 py-4 text-sm">
+        .bg-slate-dark
+      </div>
+      <div class="text-white bg-slate-darker px-6 py-4 text-sm">
+        .bg-slate-darker
       </div>
     </div>
   </div>
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-smoke-darker px-6 py-4 text-sm">
-        .bg-smoke-darker
-      </div>
-      <div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
-        .bg-smoke-dark
-      </div>
-      <div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
-        .bg-smoke
+      <div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
+        .bg-smoke-lighter
       </div>
       <div class="text-slate-dark bg-smoke-light px-6 py-4 text-sm">
         .bg-smoke-light
       </div>
-      <div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
-        .bg-smoke-lighter
+      <div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
+        .bg-smoke
+      </div>
+      <div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
+        .bg-smoke-dark
+      </div>
+      <div class="text-white bg-smoke-darker px-6 py-4 text-sm">
+        .bg-smoke-darker
       </div>
     </div>
   </div>
@@ -58,58 +58,58 @@ title: "Backgrounds"
 <div class="flex flex-wrap -mx-4 mb-4">
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-red-darker px-6 py-4 text-sm">
-        .bg-red-darker
-      </div>
-      <div class="text-white bg-red-dark px-6 py-4 text-sm">
-        .bg-red-dark
-      </div>
-      <div class="text-white bg-red px-6 py-4 text-sm">
-        .bg-red
+      <div class="text-red bg-red-lighter px-6 py-4 text-sm">
+        .bg-red-lighter
       </div>
       <div class="text-white bg-red-light px-6 py-4 text-sm">
         .bg-red-light
       </div>
-      <div class="text-red bg-red-lighter px-6 py-4 text-sm">
-        .bg-red-lighter
+      <div class="text-white bg-red px-6 py-4 text-sm">
+        .bg-red
+      </div>
+      <div class="text-white bg-red-dark px-6 py-4 text-sm">
+        .bg-red-dark
+      </div>
+      <div class="text-white bg-red-darker px-6 py-4 text-sm">
+        .bg-red-darker
       </div>
     </div>
   </div>
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-orange-darker px-6 py-4 text-sm">
-        .bg-orange-darker
-      </div>
-      <div class="text-white bg-orange-dark px-6 py-4 text-sm">
-        .bg-orange-dark
-      </div>
-      <div class="text-orange-darker bg-orange px-6 py-4 text-sm">
-        .bg-orange
+      <div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
+        .bg-orange-lighter
       </div>
       <div class="text-orange-darker bg-orange-light px-6 py-4 text-sm">
         .bg-orange-light
       </div>
-      <div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
-        .bg-orange-lighter
+      <div class="text-orange-darker bg-orange px-6 py-4 text-sm">
+        .bg-orange
+      </div>
+      <div class="text-white bg-orange-dark px-6 py-4 text-sm">
+        .bg-orange-dark
+      </div>
+      <div class="text-white bg-orange-darker px-6 py-4 text-sm">
+        .bg-orange-darker
       </div>
     </div>
   </div>
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-yellow-darker px-6 py-4 text-sm">
-        .bg-yellow-darker
-      </div>
-      <div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
-        .bg-yellow-dark
-      </div>
-      <div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
-        .bg-yellow
+      <div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
+        .bg-yellow-lighter
       </div>
       <div class="text-yellow-darker bg-yellow-light px-6 py-4 text-sm">
         .bg-yellow-light
       </div>
-      <div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
-        .bg-yellow-lighter
+      <div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
+        .bg-yellow
+      </div>
+      <div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
+        .bg-yellow-dark
+      </div>
+      <div class="text-white bg-yellow-darker px-6 py-4 text-sm">
+        .bg-yellow-darker
       </div>
     </div>
   </div>
@@ -118,58 +118,58 @@ title: "Backgrounds"
 <div class="flex flex-wrap -mx-4 mb-4">
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-green-darker px-6 py-4 text-sm">
-        .bg-green-darker
-      </div>
-      <div class="text-white bg-green-dark px-6 py-4 text-sm">
-        .bg-green-dark
-      </div>
-      <div class="text-white bg-green px-6 py-4 text-sm">
-        .bg-green
+      <div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
+        .bg-green-lighter
       </div>
       <div class="text-green-darker bg-green-light px-6 py-4 text-sm">
         .bg-green-light
       </div>
-      <div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
-        .bg-green-lighter
+      <div class="text-white bg-green px-6 py-4 text-sm">
+        .bg-green
+      </div>
+      <div class="text-white bg-green-dark px-6 py-4 text-sm">
+        .bg-green-dark
+      </div>
+      <div class="text-white bg-green-darker px-6 py-4 text-sm">
+        .bg-green-darker
       </div>
     </div>
   </div>
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-teal-darker px-6 py-4 text-sm">
-        .bg-teal-darker
-      </div>
-      <div class="text-white bg-teal-dark px-6 py-4 text-sm">
-        .bg-teal-dark
-      </div>
-      <div class="text-white bg-teal px-6 py-4 text-sm">
-        .bg-teal
+      <div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
+        .bg-teal-lighter
       </div>
       <div class="text-teal-darker bg-teal-light px-6 py-4 text-sm">
         .bg-teal-light
       </div>
-      <div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
-        .bg-teal-lighter
+      <div class="text-white bg-teal px-6 py-4 text-sm">
+        .bg-teal
+      </div>
+      <div class="text-white bg-teal-dark px-6 py-4 text-sm">
+        .bg-teal-dark
+      </div>
+      <div class="text-white bg-teal-darker px-6 py-4 text-sm">
+        .bg-teal-darker
       </div>
     </div>
   </div>
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-blue-darker px-6 py-4 text-sm">
-        .bg-blue-darker
-      </div>
-      <div class="text-white bg-blue-dark px-6 py-4 text-sm">
-        .bg-blue-dark
-      </div>
-      <div class="text-white bg-blue px-6 py-4 text-sm">
-        .bg-blue
+      <div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
+        .bg-blue-lighter
       </div>
       <div class="text-blue-darker bg-blue-light px-6 py-4 text-sm">
         .bg-blue-light
       </div>
-      <div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
-        .bg-blue-lighter
+      <div class="text-white bg-blue px-6 py-4 text-sm">
+        .bg-blue
+      </div>
+      <div class="text-white bg-blue-dark px-6 py-4 text-sm">
+        .bg-blue-dark
+      </div>
+      <div class="text-white bg-blue-darker px-6 py-4 text-sm">
+        .bg-blue-darker
       </div>
     </div>
   </div>
@@ -178,58 +178,58 @@ title: "Backgrounds"
 <div class="flex flex-wrap -mx-4 mb-4">
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-indigo-darker px-6 py-4 text-sm">
-        .bg-indigo-darker
-      </div>
-      <div class="text-white bg-indigo-dark px-6 py-4 text-sm">
-        .bg-indigo-dark
-      </div>
-      <div class="text-white bg-indigo px-6 py-4 text-sm">
-        .bg-indigo
+      <div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
+        .bg-indigo-lighter
       </div>
       <div class="text-indigo-darker bg-indigo-light px-6 py-4 text-sm">
         .bg-indigo-light
       </div>
-      <div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
-        .bg-indigo-lighter
+      <div class="text-white bg-indigo px-6 py-4 text-sm">
+        .bg-indigo
+      </div>
+      <div class="text-white bg-indigo-dark px-6 py-4 text-sm">
+        .bg-indigo-dark
+      </div>
+      <div class="text-white bg-indigo-darker px-6 py-4 text-sm">
+        .bg-indigo-darker
       </div>
     </div>
   </div>
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-purple-darker px-6 py-4 text-sm">
-        .bg-purple-darker
-      </div>
-      <div class="text-white bg-purple-dark px-6 py-4 text-sm">
-        .bg-purple-dark
-      </div>
-      <div class="text-white bg-purple px-6 py-4 text-sm">
-        .bg-purple
+      <div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
+        .bg-purple-lighter
       </div>
       <div class="text-purple-darker bg-purple-light px-6 py-4 text-sm">
         .bg-purple-light
       </div>
-      <div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
-        .bg-purple-lighter
+      <div class="text-white bg-purple px-6 py-4 text-sm">
+        .bg-purple
+      </div>
+      <div class="text-white bg-purple-dark px-6 py-4 text-sm">
+        .bg-purple-dark
+      </div>
+      <div class="text-white bg-purple-darker px-6 py-4 text-sm">
+        .bg-purple-darker
       </div>
     </div>
   </div>
   <div class="w-full md:w-1/3 px-4">
     <div class="rounded overflow-hidden">
-      <div class="text-white bg-pink-darker px-6 py-4 text-sm">
-        .bg-pink-darker
-      </div>
-      <div class="text-white bg-pink-dark px-6 py-4 text-sm">
-        .bg-pink-dark
-      </div>
-      <div class="text-white bg-pink px-6 py-4 text-sm">
-        .bg-pink
+      <div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
+        .bg-pink-lighter
       </div>
       <div class="text-pink-darker bg-pink-light px-6 py-4 text-sm">
         .bg-pink-light
       </div>
-      <div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
-        .bg-pink-lighter
+      <div class="text-white bg-pink px-6 py-4 text-sm">
+        .bg-pink
+      </div>
+      <div class="text-white bg-pink-dark px-6 py-4 text-sm">
+        .bg-pink-dark
+      </div>
+      <div class="text-white bg-pink-darker px-6 py-4 text-sm">
+        .bg-pink-darker
       </div>
     </div>
   </div>
diff --git a/docs/tailwind.js b/docs/tailwind.js
index f5e040f76..218b3a472 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -1,23 +1,283 @@
-module.exports = {
-  "extend": {
-    "sizing": {
-      "width": {
-        "128": "32rem",
-      }
-    },
-    "spacing": {
-      "padding": {
-        "12": "3rem",
-        "16": "4rem"
-      },
-      "margin": {
-        "12": "3rem",
-        "16": "4rem"
-      },
-      "negativeMargin": {
-        "12": "3rem",
-        "16": "4rem"
-      },
-    }
-  }
+var colors = {
+  'black': '#000000',
+  'white': '#ffffff',
+  'transparent': 'transparent',
+
+  '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%)',
+
+  'red-darker': '#960f0d',
+  'red-dark': '#d43633',
+  'red': '#f25451',
+  'red-light': '#fa8785',
+  'red-lighter': '#fff1f0',
+
+  'orange-darker': '#875200',
+  'orange-dark': '#f29500',
+  'orange': '#ffb82b',
+  'orange-light': '#ffd685',
+  'orange-lighter': '#fff8eb',
+
+  'yellow-darker': '#966100',
+  'yellow-dark': '#ffc400',
+  'yellow': '#ffe14a',
+  'yellow-light': '#ffea83',
+  'yellow-lighter': '#fffbe5',
+
+  'green-darker': '#056619',
+  'green-dark': '#34ae4c',
+  'green': '#57d06f',
+  'green-light': '#b1f3be',
+  'green-lighter': '#eefff1',
+
+  'teal-darker': '#025654',
+  'teal-dark': '#249e9a',
+  'teal': '#4dc0b5',
+  'teal-light': '#9eebe4',
+  'teal-lighter': '#e8fdfa',
+
+  'blue-darker': '#154267',
+  'blue-dark': '#317af6',
+  'blue': '#4aa2ea',
+  'blue-light': '#acdaff',
+  'blue-lighter': '#f1f9ff',
+
+  'indigo-darker': '#242b54',
+  'indigo-dark': '#4957a5',
+  'indigo': '#6574cd',
+  'indigo-light': '#bcc5fb',
+  'indigo-lighter': '#f4f5ff',
+
+  'purple-darker': '#331f56',
+  'purple-dark': '#714cb4',
+  'purple': '#976ae6',
+  'purple-light': '#ceb3ff',
+  'purple-lighter': '#f7f3ff',
+
+  'pink-darker': '#6b2052',
+  'pink-dark': '#d84f7d',
+  'pink': '#f66d9b',
+  'pink-light': '#ffa5c3',
+  'pink-lighter': '#fdf2f5',
+}
+
+module.exports = {
+  colors: colors,
+  screens: {
+    sm: '576px',
+    md: '768px',
+    lg: '992px',
+    xl: '1200px',
+  },
+  text: {
+    fonts: {
+      'sans': 'museo-sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
+      'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
+      'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    },
+    sizes: {
+      'base': '1rem', // 16px
+      'xs': '.75rem', // 12px
+      'sm': '.875rem', // 14px
+      'md': '1rem', // 16px
+      'lg': '1.125rem', // 18px
+      'xl': '1.25rem', // 20px
+      '2xl': '1.75rem', // 28px
+      '3xl': '2.375rem', // 38px
+      '4xl': '2.875rem', // 46px
+    },
+    weights: {
+      'normal': 300,
+      'semibold': 500,
+      'bold': 700,
+    },
+    leading: {
+      'none': 1,
+      'tight': 1.25,
+      'normal': 1.5,
+      'loose': 2,
+    },
+    tracking: {
+      'tight': '-0.05em',
+      'normal': '0',
+      'wide': '0.1em',
+    },
+    colors: {
+      ...colors
+    },
+  },
+  backgrounds: {
+    colors: {
+      ...colors
+    },
+  },
+  borders: {
+    widths: {
+      default: '1px',
+      '0': '0',
+      '2': '2px',
+      '4': '4px',
+      '8': '8px',
+    },
+    colors: {
+      default: colors['slate-lighter'],
+      ...colors
+    },
+  },
+  radiuses: {
+    default: '.25rem',
+    sm: '.125rem',
+    lg: '.5rem',
+    pill: '9999px',
+  },
+  sizing: {
+    width: {
+      'auto': 'auto',
+      'px': '1px',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '24': '6rem',
+      '32': '8rem',
+      '48': '12rem',
+      '64': '16rem',
+      '128': '32rem',
+      '1/2': '50%',
+      '1/3': '33.33333%',
+      '2/3': '66.66667%',
+      '1/4': '25%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.66667%',
+      '5/6': '83.33333%',
+      'full': '100%',
+      'screen': '100vw'
+    },
+    height: {
+      'auto': 'auto',
+      'px': '1px',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '24': '6rem',
+      '32': '8rem',
+      '48': '12rem',
+      '64': '16rem',
+      'full': '100%',
+      'screen': '100vh'
+    },
+    minHeight: {
+      '0': '0',
+      'full': '100%',
+      'screen': '100vh'
+    },
+    maxHeight: {
+      'full': '100%',
+      'screen': '100vh'
+    },
+    minWidth: {
+      '0': '0',
+      'full': '100%',
+    },
+    maxWidth: {
+      'xs': '20rem',
+      'sm': '30rem',
+      'md': '40rem',
+      'lg': '50rem',
+      'xl': '60rem',
+      '2xl': '70rem',
+      '3xl': '80rem',
+      '4xl': '90rem',
+      '5xl': '100rem',
+      'full': '100%',
+    },
+  },
+  spacing: {
+    padding: {
+      'px': '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem'
+    },
+    margin: {
+      'px': '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem'
+    },
+    negativeMargin: {
+      'px': '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem'
+    },
+  },
+  shadows: {
+    default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
+    md: '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
+    lg: '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
+    inner: 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
+    none: 'none',
+  },
+  zIndex: {
+    '0': 0,
+    '10': 10,
+    '20': 20,
+    '30': 30,
+    '40': 40,
+    '50': 50,
+    'auto': 'auto',
+  },
+  opacity: {
+    '0': '0',
+    '25': '.25',
+    '50': '.5',
+    '75': '.75',
+    '100': '1',
+  },
 }
diff --git a/yarn.lock b/yarn.lock
index f0163c2e4..3c092d869 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1056,7 +1056,7 @@ circular-json@^0.3.1:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
 
-clean-css@^4.1.9, clean-css@^4.x:
+clean-css@^4.1.9:
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
   dependencies:
@@ -3071,13 +3071,6 @@ plur@^2.0.0, plur@^2.1.2:
   dependencies:
     irregular-plurals "^1.0.0"
 
-postcss-clean@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-clean/-/postcss-clean-1.1.0.tgz#c2d61d5d8caf19a585adba16897726c2674c4207"
-  dependencies:
-    clean-css "^4.x"
-    postcss "^6.x"
-
 postcss-functions@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
@@ -3176,14 +3169,6 @@ postcss@^6.0.1, postcss@^6.0.3, postcss@^6.0.9:
     source-map "^0.5.7"
     supports-color "^4.4.0"
 
-postcss@^6.x:
-  version "6.0.13"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.13.tgz#b9ecab4ee00c89db3ec931145bd9590bbf3f125f"
-  dependencies:
-    chalk "^2.1.0"
-    source-map "^0.6.1"
-    supports-color "^4.4.0"
-
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -3558,10 +3543,6 @@ source-map@^0.4.2, source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"