diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
new file mode 100644
index 000000000..7ce9543c5
--- /dev/null
+++ b/.github/CODE_OF_CONDUCT.md
@@ -0,0 +1,10 @@
+# Tailwind CSS Community Guidelines
+
+The following community guidelines are based on [The Ruby Community Conduct Guidelines](https://www.ruby-lang.org/en/conduct/).
+
+This document provides community guidelines for a respectful, productive, and collaborative place for any person who is willing to contribute to the Tailwind CSS project. It applies to all “collaborative space”, which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).
+
+- Participants will be tolerant of opposing views.
+- Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
+- When interpreting the words and actions of others, participants should always assume good intentions.
+- Behaviour which can be reasonably considered harassment will not be tolerated.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 000000000..ce7fafb97
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,11 @@
+<!--
+
+👋 Hey, thanks for your interest in contributing to Tailwind!
+
+**Please ask first before starting work on any significant new features.**
+
+It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create an issue to first discuss any significant new features. This includes things like adding new utilities, creating new at-rules, or adding new component examples to the documentation.
+
+https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md
+
+-->
diff --git a/.npmignore b/.npmignore
index b54fc52d3..69c08ee96 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,3 +1,4 @@
 /__tests__/
 /docs/
 /src/
+yarn-error.log
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 000000000..b66655e7b
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,16 @@
+language: php
+php:
+  - '7.1'
+
+cache:
+  directories:
+    - $HOME/.composer/cache
+    - $HOME/.cache/yarn
+
+script:
+  - yarn
+  - yarn run test
+  - cd $TRAVIS_BUILD_DIR/docs && composer self-update
+  - cd $TRAVIS_BUILD_DIR/docs && composer install --prefer-dist --no-interaction
+  - cd $TRAVIS_BUILD_DIR/docs && yarn
+  - cd $TRAVIS_BUILD_DIR/docs && yarn run dev
diff --git a/README.md b/README.md
index e6ceb3357..9b8b05c40 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 </p>
 
 <p align="center">
-    <a href="https://app.codeship.com/projects/254859"><img src="https://img.shields.io/codeship/cdd4ad20-a319-0135-c87c-02251d502cd2.svg" alt="Codeship Status"></a>
+    <a href="https://travis-ci.org/tailwindcss/tailwindcss"><img src="https://img.shields.io/travis/tailwindcss/tailwindcss/master.svg" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
diff --git a/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css b/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
new file mode 100644
index 000000000..1c56044ab
--- /dev/null
+++ b/__tests__/fixtures/tailwind-input-with-explicit-screen-utilities.css
@@ -0,0 +1,11 @@
+@responsive {
+    .example {
+        color: red;
+    }
+}
+
+@tailwind screens;
+
+.john {
+    content: "wick";
+}
diff --git a/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
new file mode 100644
index 000000000..a04ced715
--- /dev/null
+++ b/__tests__/fixtures/tailwind-output-with-explicit-screen-utilities.css
@@ -0,0 +1,31 @@
+.example {
+  color: red;
+}
+
+@media (min-width: 576px) {
+  .sm\:example {
+    color: red;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:example {
+    color: red;
+  }
+}
+
+@media (min-width: 992px) {
+  .lg\:example {
+    color: red;
+  }
+}
+
+@media (min-width: 1200px) {
+  .xl\:example {
+    color: red;
+  }
+}
+
+.john {
+  content: "wick";
+}
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index efed00f09..0714f376a 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -3537,6 +3537,10 @@ button,
   cursor: auto;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -6493,6 +6497,10 @@ button,
     cursor: auto;
   }
 
+  .sm\:cursor-default {
+    cursor: default;
+  }
+
   .sm\:cursor-pointer {
     cursor: pointer;
   }
@@ -9450,6 +9458,10 @@ button,
     cursor: auto;
   }
 
+  .md\:cursor-default {
+    cursor: default;
+  }
+
   .md\:cursor-pointer {
     cursor: pointer;
   }
@@ -12407,6 +12419,10 @@ button,
     cursor: auto;
   }
 
+  .lg\:cursor-default {
+    cursor: default;
+  }
+
   .lg\:cursor-pointer {
     cursor: pointer;
   }
@@ -15364,6 +15380,10 @@ button,
     cursor: auto;
   }
 
+  .xl\:cursor-default {
+    cursor: default;
+  }
+
   .xl\:cursor-pointer {
     cursor: pointer;
   }
diff --git a/__tests__/sanity.test.js b/__tests__/sanity.test.js
index ece253709..05a1b6fed 100644
--- a/__tests__/sanity.test.js
+++ b/__tests__/sanity.test.js
@@ -28,3 +28,21 @@ it('does not add any CSS if no Tailwind features are used', () => {
       expect(result.css).toBe('')
     })
 })
+
+it('generates the right CSS with implicit screen utilities', () => {
+  const input = fs.readFileSync(
+    path.resolve(`${__dirname}/fixtures/tailwind-input-with-explicit-screen-utilities.css`),
+    'utf8'
+  )
+
+  return postcss([tailwind()])
+    .process(input)
+    .then(result => {
+      const expected = fs.readFileSync(
+        path.resolve(`${__dirname}/fixtures/tailwind-output-with-explicit-screen-utilities.css`),
+        'utf8'
+      )
+
+      expect(result.css).toBe(expected)
+    })
+})
diff --git a/dist/.gitignore b/dist/.gitignore
index d6b7ef32c..2f41fac0a 100644
--- a/dist/.gitignore
+++ b/dist/.gitignore
@@ -1,2 +1,3 @@
 *
 !.gitignore
+!.npmignore
diff --git a/dist/.npmignore b/dist/.npmignore
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/.gitignore b/docs/.gitignore
index ed6123ce7..b9fd73827 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -6,3 +6,4 @@
 /source/js/
 /source/mix-manifest.json
 /tailwind.json
+/_tmp
diff --git a/docs/config.php b/docs/config.php
index e58b54842..684bee461 100644
--- a/docs/config.php
+++ b/docs/config.php
@@ -14,4 +14,10 @@ return [
             return str_contains($page->getPath(), $path);
         });
     },
+    'anyChildrenActive' => function ($page, $children) {
+        return $children->contains(function ($link) use ($page) {
+            return $page->getPath() == '/docs/'. $link;
+        });
+    },
+    'navigation' => require_once('navigation.php'),
 ];
diff --git a/docs/navigation.php b/docs/navigation.php
new file mode 100644
index 000000000..db5b7db7c
--- /dev/null
+++ b/docs/navigation.php
@@ -0,0 +1,86 @@
+<?php
+
+return [
+    'Introduction' => [
+        'What is Tailwind?' => 'what-is-tailwind',
+    ],
+    'Getting Started' => [
+        'Installation' => 'installation',
+        'Configuration' => 'configuration',
+        'Colors' => 'colors',
+        'Responsive Design' => 'responsive-design',
+        'Adding New Utilities' => 'adding-new-utilities',
+        'Extracting Components' => 'extracting-components',
+        'Functions &amp; Directives' => 'functions-and-directives',
+    ],
+    'Styles' => [
+        'Backgrounds' => [
+            'Color' => 'background-color',
+            'Position' => 'background-position',
+            'Size' => 'background-size',
+        ],
+        'Borders' => [
+            'Width' => 'border-width',
+            'Color' => 'border-color',
+            'Style' => 'border-style',
+        ],
+        'Border Radius' => 'border-radius',
+        'Container' => 'container',
+        'Display' => 'display',
+        'Flexbox' => [
+            'Display' => 'flexbox-display',
+            'Direction' => 'flexbox-direction',
+            'Wrapping' => 'flexbox-wrapping',
+            'Justify Content' => 'flexbox-justify-content',
+            'Align Items' => 'flexbox-align-items',
+            'Align Content' => 'flexbox-align-content',
+            'Align Self' => 'flexbox-align-self',
+            'Flex, Grow, &amp; Shrink' => 'flexbox-flex-grow-shrink',
+        ],
+        'Floats' => 'floats',
+        'Forms' => 'forms',
+        'Grid' => 'grid',
+        'Interactivity' => [
+            'Cursor' => 'cursor',
+            'Resize' => 'resize',
+            'Pointer Events' => 'pointer-events',
+            'User Select' => 'user-select',
+        ],
+        'Lists' => 'lists',
+        'Opacity' => 'opacity',
+        'Overflow' => 'overflow',
+        'Positioning' => 'positioning',
+        'Shadows' => 'shadows',
+        'Sizing' => [
+            'Width' => 'width',
+            'Min-Width' => 'min-width',
+            'Max-Width' => 'max-width',
+            'Height' => 'height',
+            'Min-Height' => 'min-height',
+            'Max-Height' => 'max-height',
+        ],
+        'Spacing' => 'spacing',
+        'SVG' => 'svg',
+        'Typography' => [
+            'Fonts' => 'fonts',
+            'Color' => 'text-color',
+            'Sizing' => 'text-sizing',
+            'Weight' => 'font-weight',
+            'Alignment' => 'text-alignment',
+            'Line Height' => 'line-height',
+            'Letter Spacing' => 'letter-spacing',
+            'Style &amp; Decoration' => 'text-style',
+            'Whitespace &amp; Wrapping' => 'whitespace-and-wrapping',
+        ],
+        'Vertical Alignment' => 'vertical-alignment',
+        'Visibility' => 'visibility',
+        'Z-Index' => 'z-index',
+    ],
+    'Examples' => [
+        'Alerts' => 'examples/alerts',
+        'Buttons' => 'examples/buttons',
+        'Cards' => 'examples/cards',
+        'Forms' => 'examples/forms',
+        'Navigation' => 'examples/navigation',
+    ],
+];
diff --git a/docs/source/_assets/js/app.js b/docs/source/_assets/js/app.js
index 068b4f79b..7fa375b53 100644
--- a/docs/source/_assets/js/app.js
+++ b/docs/source/_assets/js/app.js
@@ -7,9 +7,16 @@ window.Vue = require('vue')
 Vue.component('responsive-code-sample', require('./components/ResponsiveCodeSample.vue'))
 
 const app = new Vue({
-    el: '#app'
+  el: '#app'
 })
 
 Prism.highlightAll()
-anchors.options = { placement: 'left', class: 'text-slate-light' };
-anchors.add();
+anchors.options = { placement: 'left', class: 'text-slate-light' }
+anchors.add()
+
+// Add shortcut to search input when pressing the "/" key
+document.onkeyup = function (e) {
+  if (e.which == 191) {
+    document.getElementById('docsearch').focus()
+  }
+}
diff --git a/docs/source/_assets/js/nav.js b/docs/source/_assets/js/nav.js
index 2394f7b8f..4eb26411a 100644
--- a/docs/source/_assets/js/nav.js
+++ b/docs/source/_assets/js/nav.js
@@ -36,7 +36,7 @@ $.when($.ready).then(function() {
       // Scroll to the top of the page
       $(document).scrollTop(0)
 
-      // Add page load to brower history
+      // Add page load to browser history
       window.history.pushState({
         'href': href,
         'title': title,
@@ -53,7 +53,6 @@ $.when($.ready).then(function() {
   // Load page history (for back/forward nav)
   window.onpopstate = function(e) {
     if(e.state){
-
       // Update the page
       $('title').text(e.state.title)
       $('#nav').html(e.state.nav)
diff --git a/docs/source/_assets/less/docsearch.less b/docs/source/_assets/less/docsearch.less
new file mode 100644
index 000000000..50084efc0
--- /dev/null
+++ b/docs/source/_assets/less/docsearch.less
@@ -0,0 +1,37 @@
+.algolia-autocomplete {
+  width: 100% !important;
+
+  [class^="ds-dataset-"] {
+    .algolia-docsearch-suggestion--text {
+      .algolia-docsearch-suggestion--highlight {
+        box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179,.8);
+      }
+    }
+
+    .algolia-docsearch-suggestion--highlight {
+      color: config('colors.tailwind-teal');
+      background: rgba(68, 168, 179, .1);
+    }
+  }
+
+  @media (max-width: config('screens.md')) {
+    .ds-dropdown-menu {
+      width: 100% !important;
+      max-width: 100% !important;
+      min-width: 0 !important;
+    }
+
+    .algolia-docsearch-suggestion--subcategory-column {
+      display: none !important;
+    }
+
+    .algolia-docsearch-suggestion--content {
+      width: 100% !important;
+      padding: 0 !important;
+
+      &:before {
+        display: none !important;
+      }
+    }
+  }
+}
diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less
index 744a9e7eb..dd7094c62 100644
--- a/docs/source/_assets/less/main.less
+++ b/docs/source/_assets/less/main.less
@@ -18,6 +18,7 @@ ul {
   @apply .list-reset;
 }
 
+@import "docsearch";
 @import "prism";
 @import "markdown";
 
@@ -27,6 +28,14 @@ ul {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='778' viewBox='0 0 600 778' %3E%3Cg fill='%23E8ECEF'%3E%3Cpath d='M0 31h133V0h2v237a2 2 0 0 1-2 2H0v-2h133v-18H0v-2h133v-42H0v-2h133v-72H0v-2h133V33H0v-2zm0 20h14a1 1 0 0 1 0 2H0v-2zm0 89h11a1 1 0 1 1 0 2H0v-2zm0 6h16a1 1 0 1 1 0 2H0v-2zm0 4h14a1 1 0 1 1 0 2H0v-2zm0 4h16a1 1 0 1 1 0 2H0v-2zm0 4h12a1 1 0 1 1 0 2H0v-2zm0-99h36a1 1 0 0 1 0 2H0v-2zm0 4h34a1 1 0 0 1 0 2H0v-2zm0 4h32a1 1 0 0 1 0 2H0v-2zm0 4h34a1 1 0 0 1 0 2H0v-2zm0 4h32a1 1 0 0 1 0 2H0v-2zm0 39.46a10 10 0 0 1 0 19.08v-2.12a8 8 0 0 0 0-14.84v-2.12zM12 2h66a1 1 0 0 1 0 2H12a1 1 0 0 1 0-2zm10 4h46a1 1 0 0 1 0 2H22a1 1 0 0 1 0-2zm9 6h10a3 3 0 0 1 0 6H31a3 3 0 0 1 0-6zm-6 186h40a3 3 0 0 1 0 6H25a3 3 0 0 1 0-6zM49 12h10a3 3 0 0 1 0 6H49a3 3 0 0 1 0-6zm-4 220a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-20-92h28a1 1 0 1 1 0 2H31a1 1 0 1 1 0-2zm-10 48h48a1 1 0 1 1 0 2H21a1 1 0 1 1 0-2zm5 36h38a1 1 0 1 1 0 2H26a1 1 0 1 1 0-2zm-15-32h68a1 1 0 1 1 0 2H11a1 1 0 1 1 0-2zm17-46h34a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm2 4h30a1 1 0 1 1 0 2H30a1 1 0 1 1 0-2zm2 4h26a1 1 0 1 1 0 2H32a1 1 0 1 1 0-2zm-4 4h34a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm53-18h24a1 1 0 1 1 0 2H81a1 1 0 1 1 0-2zm-3 6h30a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm-4 4h38a1 1 0 1 1 0 2H74a1 1 0 1 1 0-2zm2 4h34a1 1 0 1 1 0 2H76a1 1 0 1 1 0-2zm2 4h30a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zM55 46h56a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H55a2 2 0 0 1-2-2V48c0-1.1.9-2 2-2zm38 88a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm-48 0a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm48-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-48 0a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm10-84v36h56V48H55zm13 32h-8a1 1 0 0 1-1-1v-8a1 1 0 0 1 1.7-.7l8 8A1 1 0 0 1 68 80zM56 200v2h9a1 1 0 1 0 0-2h-9zm-2 0H25a1 1 0 1 0 0 2h29v-2zM31 14a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2H31zm18 0a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2H49zM0 761v-2h133v-12H0v-2h133a2 2 0 0 1 2 2v31h-2v-17H0zm22 13h46a1 1 0 1 1 0 2H22a1 1 0 1 1 0-2zm82-22h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zM0 471v-2h133v-87H0v-2h17v-44H0v-2h103v-6H0v-2h103v-1a1 1 0 0 0-1-1H0v-2h102a3 3 0 0 1 3 3v55h28V261H0v-2h133a2 2 0 0 1 2 2v270a2 2 0 0 1-2 2H0v-2h133v-16H0v-2h133v-42H0zm8-68a1 1 0 1 1 0 2H0v-2h8zM0 522h6a1 1 0 1 1 0 2H0v-2zm0-113h12a1 1 0 1 1 0 2H0v-2zm0 4h8a1 1 0 1 1 0 2H0v-2zm0 4h6a1 1 0 1 1 0 2H0v-2zm6 23a1 1 0 1 1 0 2H0v-2h6zm-6 6h6a1 1 0 1 1 0 2H0v-2zm0 4h10a1 1 0 1 1 0 2H0v-2zm0 4h6a1 1 0 1 1 0 2H0v-2zm103-74v-44H19v44h84zm-81-95h46a1 1 0 1 1 0 2H22a1 1 0 1 1 0-2zm-10 8h66a1 1 0 1 1 0 2H12a1 1 0 1 1 0-2zm10 4h46a1 1 0 1 1 0 2H22a1 1 0 1 1 0-2zm15 6h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H37a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1 4h14v-2H38v2zm0-32h14a1 1 0 1 1 0 2H38a1 1 0 1 1 0-2zm7-2a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm60 252a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-75-41h18a1 1 0 1 1 0 2H36a1 1 0 1 1 0-2zm-25 4h68a1 1 0 1 1 0 2H11a1 1 0 1 1 0-2zm-10 6h88a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zm12 4h64a1 1 0 1 1 0 2H13a1 1 0 1 1 0-2zm15-95h24a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm1-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-1 10h29a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm0 4h35a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm0 4h32a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm50-14h22a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm1-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-1 10h34a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm0 4h30a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm0 4h33a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm-50 23h20a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm1-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-1 10h29a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm0 4h31a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm0 4h34a1 1 0 1 1 0 2H28a1 1 0 1 1 0-2zm50-14h26a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm1-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-1 10h30a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm0 4h26a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2zm0 4h29a1 1 0 1 1 0 2H78a1 1 0 1 1 0-2z'/%3E%3Cpath d='M0 555v-2h133a2 2 0 0 1 2 2v168a2 2 0 0 1-2 2H0v-2h133V569H0v-2h133v-12H0zm16 3h58a3 3 0 0 1 0 6H16a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h58a1 1 0 1 0 0-2H16zm88 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-14 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-75 21h60a2 2 0 0 1 2 2v46a2 2 0 0 1-2 2H15a2 2 0 0 1-2-2v-46c0-1.1.9-2 2-2zm0 52h60a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H15a2 2 0 0 1-2-2v-36c0-1.1.9-2 2-2zm0 42h60a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H15a2 2 0 0 1-2-2v-36c0-1.1.9-2 2-2zm68-94h28a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2H83a2 2 0 0 1-2-2v-24c0-1.1.9-2 2-2zm0 2v24h28v-24H83zm0 28h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2H83a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h28v-26H83zm-8 8H15v8h60v-8zm0 82v-26H15v26h60zm0 2H15v8h60v-8zm0-44v-26H15v26h60zm0 2H15v8h60v-8zm0-44v-36H15v36h60zm-61-44h15a1 1 0 1 1 0 2H14a1 1 0 1 1 0-2zm68 0h15a1 1 0 1 1 0 2H82a1 1 0 1 1 0-2zm0 70h30a1 1 0 1 1 0 2H82a1 1 0 1 1 0-2zm0 4h30a1 1 0 1 1 0 2H82a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2H82a1 1 0 1 1 0-2z'/%3E%3Cpath d='M600 31v2h-43v66h43v2h-43v72h43v2h-43v42h43v2h-43v18h43v2h-43a2 2 0 0 1-2-2V0h2v31h43zm0 20v2h-22a1 1 0 1 1 0-2h22zm0 89v2h-17a1 1 0 1 1 0-2h17zm0 6v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-20a1 1 0 1 1 0-2h20zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-18a1 1 0 1 1 0-2h18zm0-99v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 39.46v2.12a8 8 0 1 0 0 14.84v2.12a10 10 0 1 1 0-19.08zM578 79h17a1 1 0 1 1 0 2h-17a1 1 0 1 1 0-2zm22 682h-43v17h-2v-31c0-1.1.9-2 2-2h43v2h-43v12h43v2zm-21-6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm21-284h-43v42h43v2h-43v16h43v2h-43a2 2 0 0 1-2-2V261c0-1.1.9-2 2-2h43v2h-43v119h28v-55a3 3 0 0 1 3-3h12v2h-12a1 1 0 0 0-1 1v1h13v2h-13v6h13v2h-13v44h13v2h-43v87h43v2zm0-68v2h-22a1 1 0 1 1 0-2h22zm0 119v2h-22a1 1 0 1 1 0-2h22zm0-113v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 23v2h-22a1 1 0 1 1 0-2h22zm0 6v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm0 4v2h-22a1 1 0 1 1 0-2h22zm-21-55a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 37a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3Cpath d='M600 555h-43v12h43v2h-43v154h43v2h-43a2 2 0 0 1-2-2V555c0-1.1.9-2 2-2h43v2zm-16 5h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-2 27h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4-24h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 6h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm0 6h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm0 6h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 6h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm4-42h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm0 4h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-8-4h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1 2v2h2v-2h-2zm0-14a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3Cpath d='M157 201h176a2 2 0 0 1 2 2v334a2 2 0 0 1-2 2H157a2 2 0 0 1-2-2V203c0-1.1.9-2 2-2zm176 294v-78H157v78h176zm0 2H157v40h176v-40zm0-82v-44H157v44h176zm0-46V267H157v102h176zm0-104v-62H157v62h176zm-155-38h56a1 1 0 1 1 0 2h-56a1 1 0 1 1 0-2zm0 6h76a1 1 0 1 1 0 2h-76a1 1 0 1 1 0-2zm0 4h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm0 6h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-14a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1 2v2h12v-2h-12zm17-2h14a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-14a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1 4h12v-2h-12v2zm107-39h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-93 3a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm2 180v4a1 1 0 0 1-1.7.7l-2-2a1 1 0 0 1 0-1.4l2-2a1 1 0 0 1 1.7.7zm128 0a1 1 0 0 1 1.7-.7l2 2a1 1 0 0 1 0 1.4l-2 2a1 1 0 0 1-1.7-.7v-4zM178 283h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 6h78a1 1 0 1 1 0 2h-78a1 1 0 1 1 0-2zm0 4h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm28 94h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm-28 82h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 36h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm-108 4h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm36 0h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm36 0h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-108 4h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm36 0h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-108 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 10h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36-10h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm-108-44h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm48-8h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm48-8h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h32a1 1 0 1 1 0 2h-32a1 1 0 1 1 0-2zm0 4h34a1 1 0 1 1 0 2h-34a1 1 0 1 1 0-2zm-68-84h78a1 1 0 1 1 0 2h-78a1 1 0 1 1 0-2zm0 4h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm-28-56h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h58a1 1 0 1 1 0 2h-58a1 1 0 1 1 0-2zm0 4h54a1 1 0 1 1 0 2h-54a1 1 0 1 1 0-2zm72-10h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h60a1 1 0 1 1 0 2h-60a1 1 0 1 1 0-2zm0 4h46a1 1 0 1 1 0 2h-46a1 1 0 1 1 0-2zm1-52h60a2 2 0 0 1 2 2v32a2 2 0 0 1-2 2h-60a2 2 0 0 1-2-2v-32c0-1.1.9-2 2-2zm0 2v32h60v-32h-60zm-72-2h60a2 2 0 0 1 2 2v32a2 2 0 0 1-2 2h-60a2 2 0 0 1-2-2v-32c0-1.1.9-2 2-2zm0 2v32h60v-32h-60zm5 28a1 1 0 0 1-1-1v-6a1 1 0 0 1 1.7-.7l6 6a1 1 0 0 1-.7 1.7h-6zm72 0a1 1 0 0 1-1-1v-6a1 1 0 0 1 1.7-.7l6 6a1 1 0 0 1-.7 1.7h-6zm49 201a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-132-97h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm48 0h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm48 0h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm36 22v-20h-36v20h36zm0 2h-36v4h36v-4zm-48-2v-20h-36v20h36zm0 2h-36v4h36v-4zm-48-2v-20h-36v20h36zm0 2h-36v4h36v-4zM157 7h176a2 2 0 0 1 2 2v170a2 2 0 0 1-2 2H157a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2zm176 55.48l-8.55 3.42-9.94 5.96a1 1 0 0 1-.41.14l-10 1a1 1 0 0 1-.55-.1l-9.88-4.95-9.57-1.91-9.73 3.89a1 1 0 0 1-1-.15l-9.3-7.44-9.36 9.37a1 1 0 0 1-.9.27l-9.71-1.94-9.73 3.89a1 1 0 0 1-.74 0l-9.73-3.9-9.4 1.9-9.5 9.48V93h128V62.48zm0-2.16V45H205v33.59l8.3-8.3a1 1 0 0 1 .5-.27l10-2a1 1 0 0 1 .57.05l9.63 3.85 9.63-3.85a1 1 0 0 1 .57-.05l9.47 1.9 9.62-9.63a1 1 0 0 1 1.33-.07l9.55 7.64 9.46-3.79a1 1 0 0 1 .57-.05l10 2a1 1 0 0 1 .25.09l9.74 4.87 9.49-.95 9.8-5.89.15-.07 9.37-3.75zm0 42.68v-8H205v8h128zm0 2H205v64h128v-64zm0-62V23H205v20h128zm0-22V9H205v12h128zM157 169h46V9h-46v160zm0 2v8h176v-8H157zm53-143h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 80h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 8h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm32-56h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm0 8h17a1 1 0 1 1 0 2h-17a1 1 0 1 1 0-2zm0 8h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm32-56h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h17a1 1 0 1 1 0 2h-17a1 1 0 1 1 0-2zm0 8h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 8h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm0 8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm32-56h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 8h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 8h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 8h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 8h17a1 1 0 1 1 0 2h-17a1 1 0 1 1 0-2zm0 8h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zM210 36h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-46-24h38a3 3 0 0 1 0 6h-38a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h38a1 1 0 1 0 0-2h-38zm90 12h8a3 3 0 0 1 0 6h-8a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8zm16-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm8-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-164-3h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 6h15a1 1 0 1 1 0 2h-15a1 1 0 1 1 0-2zm0 6h11a1 1 0 1 1 0 2h-11a1 1 0 1 1 0-2zm0 10h13a1 1 0 1 1 0 2h-13a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h19a1 1 0 1 1 0 2h-19a1 1 0 1 1 0-2zm0 6h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm166-57a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-6 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-6 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-148 0h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-5 3a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 542h176a2 2 0 0 1 2 2v202a2 2 0 0 1-2 2H157a2 2 0 0 1-2-2V561c0-1.1.9-2 2-2zm176 20H157v10h176v-10zm0-2v-16H157v16h176zm0 14H157v172h176V591zm-33-25h10a3 3 0 0 1 0 6h-10a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2h-10zM178 703h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm48-8h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm-48 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm48-8h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm-48 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm48-8h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm48-146h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm-96-8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm96 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-96-14h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm0-17h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm0 4h9a1 1 0 1 1 0 2h-9a1 1 0 1 1 0-2zm16 13h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm12 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm-4-11h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm16 11h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm18 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-8 26h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h34a1 1 0 1 1 0 2h-34a1 1 0 1 1 0-2zm0 4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h34a1 1 0 1 1 0 2h-34a1 1 0 1 1 0-2zm0 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h32a1 1 0 1 1 0 2h-32a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 12h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h30a1 1 0 1 1 0 2h-30a1 1 0 1 1 0-2zm0 12h36a1 1 0 1 1 0 2h-36a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 12h32a1 1 0 1 1 0 2h-32a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm0 4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 12h32a1 1 0 1 1 0 2h-32a1 1 0 1 1 0-2zm0 4h38a1 1 0 1 1 0 2h-38a1 1 0 1 1 0-2zm-96-100h83a1 1 0 1 1 0 2h-83a1 1 0 1 1 0-2zm0 4h86a1 1 0 1 1 0 2h-86a1 1 0 1 1 0-2zm0 4h54a1 1 0 1 1 0 2h-54a1 1 0 1 1 0-2zm1-52h84a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2h-84a2 2 0 0 1-2-2v-36c0-1.1.9-2 2-2zm0 2v36h84v-36h-84zm0 62h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h36v-26h-36zm48-2h36a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-36a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h36v-26h-36zm18-101a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm60 16a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-8-15a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm20 15a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm46-399h176a2 2 0 0 1 2 2v272a2 2 0 0 1-2 2H357a2 2 0 0 1-2-2V189c0-1.1.9-2 2-2zm176 118v-38h-57v38h57zm0 2H357v66h176v-66zm-176-2h57v-38h-57v38zm59 0h58v-38h-58v38zm117-40v-62H357v62h176zm0 110H357v36h176v-36zm0 38H357v48h176v-48zm0-212v-12H357v12h176zm-53-7h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-16 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-53 3a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm42 120h48a1 1 0 1 1 0 2h-48a1 1 0 1 1 0-2zm-10 4h68a1 1 0 1 1 0 2h-68a1 1 0 1 1 0-2zm14 74h40a3 3 0 0 1 0 6h-40a3 3 0 0 1 0-6zm-4-10h48a1 1 0 1 1 0 2h-48a1 1 0 1 1 0-2zm-10 4h68a1 1 0 1 1 0 2h-68a1 1 0 1 1 0-2zm-33 40h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36 0h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm36 0h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36-8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm-108 12h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36 0h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0-12h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm72 0h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-108 12h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36 0h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm36-16h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 4h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm36 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-108-8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm101-80a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 4h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-11 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm-59-13a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 4h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-11 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm-59-13a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 4h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-11 23a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm11-7h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 4h12a1 1 0 1 1 0 2h-12a1 1 0 1 1 0-2zm-16 93h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm36-10h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm72-8h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm19 21a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-89-231h46a1 1 0 1 1 0 2h-46a1 1 0 1 1 0-2zm-50 70h27a1 1 0 1 1 0 2h-27a1 1 0 1 1 0-2zm2 4h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm60-4h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm-2 4h24a1 1 0 1 1 0 2h-24a1 1 0 1 1 0-2zm59-4h27a1 1 0 1 1 0 2h-27a1 1 0 1 1 0-2zm3 4h21a1 1 0 1 1 0 2h-21a1 1 0 1 1 0-2zm-82-68h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm12 8h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm24 0h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm-23 6h16v-4h-16v4zm24 0h16v-4h-16v4zm49-51h12a3 3 0 0 1 0 6h-12a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2h-12zm-44 203h-29a1 1 0 1 0 0 2h29v-2zm2 0v2h9a1 1 0 1 0 0-2h-9zm-99 86h176a2 2 0 0 1 2 2v186a2 2 0 0 1-2 2H357a2 2 0 0 1-2-2V485c0-1.1.9-2 2-2zm176 16H357v172h176V499zm0-2v-12H357v12h176zm-31-9h8a3 3 0 0 1 0 6h-8a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8zm-18 13h26a3 3 0 0 1 0 6h-26a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h26a1 1 0 1 0 0-2h-26zm-64-15h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-83 23h96a2 2 0 0 1 2 2v144a2 2 0 0 1-2 2h-96a2 2 0 0 1-2-2V515c0-1.1.9-2 2-2zm0 2v144h96V515h-96zm103 8h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm-98-4h70a1 1 0 1 1 0 2h-70a1 1 0 1 1 0-2zm0 4h60a1 1 0 1 1 0 2h-60a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm78-12h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 14h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm0 6h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 6h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h22a1 1 0 1 1 0 2h-22a1 1 0 1 1 0-2zm0 6h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-98-117h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-6 15h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm1-12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm90 30a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h64a1 1 0 1 1 0 2h-64a1 1 0 1 1 0-2zm0 4h73a1 1 0 1 1 0 2h-73a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h67a1 1 0 1 1 0 2h-67a1 1 0 1 1 0-2zm0 4h65a1 1 0 1 1 0 2h-65a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h72a1 1 0 1 1 0 2h-72a1 1 0 1 1 0-2zm0 4h65a1 1 0 1 1 0 2h-65a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h70a1 1 0 1 1 0 2h-70a1 1 0 1 1 0-2zm0 4h50a1 1 0 1 1 0 2h-50a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h65a1 1 0 1 1 0 2h-65a1 1 0 1 1 0-2zm0 4h70a1 1 0 1 1 0 2h-70a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h70a1 1 0 1 1 0 2h-70a1 1 0 1 1 0-2zm0 4h60a1 1 0 1 1 0 2h-60a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-85 14h67a1 1 0 1 1 0 2h-67a1 1 0 1 1 0-2zm0 4h65a1 1 0 1 1 0 2h-65a1 1 0 1 1 0-2zm0 4h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm10 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm65-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM533 0h2v165a2 2 0 0 1-2 2H357a2 2 0 0 1-2-2V0h2v165h176V0zM380 3h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v26h28V5h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V61c0-1.1.9-2 2-2zm0 2v26h28V61h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h28v-26h-28zM414 3h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v26h28V5h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V61c0-1.1.9-2 2-2zm0 2v26h28V61h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h28v-26h-28zM448 3h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v26h28V5h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2V61c0-1.1.9-2 2-2zm0 2v26h28V61h-28zm0 54h28a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-28a2 2 0 0 1-2-2v-26c0-1.1.9-2 2-2zm0 2v26h28v-26h-28zm-69-80h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-68 52h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0-40h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 44h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm-68 52h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0-40h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 44h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zm34-4h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 4h16a1 1 0 1 1 0 2h-16a1 1 0 1 1 0-2zM485 5h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm0 20h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0-8h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 14h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm0 20h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0-8h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm0 14h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm0 6h18a1 1 0 1 1 0 2h-18a1 1 0 1 1 0-2zm0 6h20a1 1 0 1 1 0 2h-20a1 1 0 1 1 0-2zm0 6h23a1 1 0 1 1 0 2h-23a1 1 0 1 1 0-2zm48 661v-7H357v7h-2v-83c0-1.1.9-2 2-2h176a2 2 0 0 1 2 2v83h-2zm0-9v-46H357v46h176zm0-58H357v10h176v-10zm0-2v-14H357v14h176zm-34 4h10a3 3 0 0 1 0 6h-10a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2h-10zm-89-16h70a3 3 0 0 1 0 6h-70a3 3 0 0 1 0-6zm0 2a1 1 0 1 0 0 2h70a1 1 0 1 0 0-2h-70zm-2 14h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm-29-2h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm0 4h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm45-2h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm14 0h10a1 1 0 1 1 0 2h-10a1 1 0 1 1 0-2zm16 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm12 0h6a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2zm-81-14h14a1 1 0 1 1 0 2h-14a1 1 0 1 1 0-2zm-5 3a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm110 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-111 57h26a1 1 0 1 1 0 2h-26a1 1 0 1 1 0-2zm106 0h8a1 1 0 1 1 0 2h-8a1 1 0 1 1 0-2zm-63-41h46a1 1 0 1 1 0 2h-46a1 1 0 1 1 0-2zm-10 6h66a1 1 0 1 1 0 2h-66a1 1 0 1 1 0-2zm10 4h46a1 1 0 1 1 0 2h-46a1 1 0 1 1 0-2zm17 6h12a4 4 0 1 1 0 8h-12a4 4 0 1 1 0-8zm0 2a2 2 0 0 0 0 4h12a2 2 0 0 0 0-4h-12z'/%3E%3C/g%3E%3C/svg%3E");
 }
 
+.table-collapse {
+  border-collapse: collapse;
+}
+
+.placeholder-grey-dark::placeholder {
+  @apply .text-grey-dark;
+}
+
 [v-cloak] .v-cloak-hidden {
   display: none;
 }
diff --git a/docs/source/_assets/less/prism.less b/docs/source/_assets/less/prism.less
index 6598e9804..a19790703 100644
--- a/docs/source/_assets/less/prism.less
+++ b/docs/source/_assets/less/prism.less
@@ -7,82 +7,82 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
-    @apply .font-mono;
-    @apply .text-slate-dark;
+  @apply .font-mono;
+  @apply .text-slate-dark;
 
-    background: none;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
+  background: none;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
 
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
 
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
 
-    font-weight: 400;
+  font-weight: 400;
 }
 
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-    text-shadow: none;
-    background: #b3d4fc;
+  text-shadow: none;
+  background: #b3d4fc;
 }
 
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
-    text-shadow: none;
-    background: #b3d4fc;
+  text-shadow: none;
+  background: #b3d4fc;
 }
 
 @media print {
-    code[class*="language-"],
-    pre[class*="language-"] {
-        text-shadow: none;
-    }
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
 }
 
 /* Code blocks */
 pre {
-    padding: 1em;
-    margin: .5em 0;
-    overflow: auto;
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-    background: transparent;
-    @apply .text-sm;
+  background: transparent;
+  @apply .text-sm;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-    padding: .1em;
-    border-radius: .3em;
-    white-space: normal;
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    @apply .text-grey;
+  @apply .text-grey;
 }
 
 .token.punctuation {
-    @apply .text-blue-dark;
-    // color: #999;
+  @apply .text-blue-dark;
+  // color: #999;
 }
 
 .namespace {
-    opacity: .7;
+  opacity: .7;
 }
 
 .token.property,
@@ -91,19 +91,19 @@ pre[class*="language-"] {
 .token.number,
 .token.constant,
 .token.symbol {
-    @apply .text-blue-dark;
+  @apply .text-blue-dark;
 }
 
 code.language-diff, pre.language-diff {
-    @apply .text-grey-darker;
+  @apply .text-grey-darker;
 }
 
 .token.deleted {
-    @apply .text-grey;
+  @apply .text-grey;
 }
 
 .token.inserted {
-    @apply .text-blue-dark;
+  @apply .text-blue-dark;
 }
 
 // .token.selector,
@@ -112,7 +112,7 @@ code.language-diff, pre.language-diff {
 // .token.builtin,
 // .token.inserted,
 .token.string {
-    @apply .text-purple;
+  @apply .text-purple;
 }
 
 .token.operator,
@@ -120,36 +120,35 @@ code.language-diff, pre.language-diff {
 .token.url,
 .language-css .token.string,
 .style .token.string {
-    color: #a67f59;
-    background: hsla(0, 0%, 100%, .5);
+  color: #a67f59;
+  background: hsla(0, 0%, 100%, .5);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-    @apply .text-purple;
-    // color: #07a;
+  @apply .text-purple;
+  // color: #07a;
 }
 
 .token.function {
-    color: #DD4A68;
+  color: #DD4A68;
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-    color: #e90;
+  color: #e90;
 }
 
 .token.important,
 .token.bold {
-    font-weight: bold;
+  font-weight: bold;
 }
 .token.italic {
-    font-style: italic;
+  font-style: italic;
 }
 
 .token.entity {
-    cursor: help;
+  cursor: help;
 }
-
diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php
index 3c454a92d..9450b9da8 100644
--- a/docs/source/_layouts/documentation.blade.php
+++ b/docs/source/_layouts/documentation.blade.php
@@ -1,195 +1,109 @@
 @extends('_layouts.master')
 
 @section('meta')
+<meta name="twitter:card" content="summary">
+<meta name="twitter:site" content="@tailwindcss">
+<meta name="twitter:title" content="{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }}">
+<meta name="twitter:description" content="{{ $page->description ? $page->description : 'Documentation for the Tailwind CSS framework.' }}">
+<meta name="twitter:image" content="https://tailwindcss.com/img/tailwind-square.png">
+<meta name="twitter:creator" content="@tailwindcss">
 @endsection
 
 @section('body')
 <div class="min-h-screen">
-    <div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll scrolling-touch 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 class="mb-4">
-                <div class="hidden md:flex md:justify-center">
-                    <a href="/" class="flex justify-center">
-                        <svg class="w-16 h-16 mx-auto block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg>
-                    </a>
-                </div>
-                <p class="text-center">
-                    <a href="https://github.com/tailwindcss/tailwindcss" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a>
-                </p>
-            </div>
-            <div class="relative opacity-75">
-                <input class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full cursor-not-allowed" type="text" placeholder="Search coming soon!" disabled>
-                <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
-                    <svg class="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>
-                </div>
-            </div>
+  <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 class="mb-4">
+        <div class="hidden md:flex md:justify-center">
+          <a href="/" class="flex justify-center">
+            <svg class="w-16 h-16 mx-auto block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg>
+          </a>
         </div>
-        <div class="p-8 flex-1 overflow-y-scroll">
-            <nav id="nav" class="text-base overflow-y-scroll">
-                <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="hover:underline {{ $page->active('/docs/what-is-tailwind') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/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="hover:underline {{ $page->active('/docs/installation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/installation">Installation</a></li>
-                        <li class="mb-3">
-                            <a class="hover:underline {{ $page->active('/docs/configuration') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/configuration">
-                                Configuration
-                            </a>
-                        </li>
-                        <li class="mb-3">
-                            <a class="hover:underline {{ $page->active('/docs/colors') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/colors">
-                                Colors
-                            </a>
-                        </li>
-                        <li class="mb-3">
-                            <a class="hover:underline {{ $page->active('/docs/responsive-design') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/responsive-design">
-                                Responsive Design
-                            </a>
-                        </li>
-                        <li class="mb-3">
-                            <a class="hover:underline {{ $page->active('/docs/adding-new-utilities') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/adding-new-utilities">
-                                Adding New Utilities
-                            </a>
-                        </li>
-                        <li class="mb-3">
-                            <a class="hover:underline {{ $page->active('/docs/extracting-components') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/extracting-components">
-                                Extracting Components
-                            </a>
-                        </li>
-                        <li class="mb-3">
-                            <a class="hover:underline {{ $page->active('/docs/functions-and-directives') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/functions-and-directives">
-                                Functions &amp; Directives
-                            </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 }}/docs/background-color" class="hover:underline block mb-2 {{ $page->active('/docs/background-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
-                            <ul class="pl-4 {{ $page->active('/docs/background-') ? 'block' : 'hidden' }}">
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-color" class="hover:underline {{ $page->active('/docs/background-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-position" class="hover:underline {{ $page->active('/docs/background-position') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Position</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/background-size" class="hover:underline {{ $page->active('/docs/background-size') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Size</a></li>
-                            </ul>
-                        </li>
-                        <li class="mb-3">
-                            <a href="{{ $page->baseUrl }}/docs/border-width" class="hover:underline block mb-2 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Borders</a>
-                            <ul class="pl-4 {{ $page->active(['/docs/border-width', '/docs/border-color', '/docs/border-style']) ? 'block' : 'hidden' }}">
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-width" class="hover:underline {{ $page->active('/docs/border-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-color" class="hover:underline {{ $page->active('/docs/border-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-style" class="hover:underline {{ $page->active('/docs/border-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style</a></li>
-                            </ul>
-                        </li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/border-radius" class="hover:underline {{ $page->active('/docs/border-radius') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Border Radius</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/container" class="hover:underline {{ $page->active('/docs/container') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Container</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/display" class="hover:underline {{ $page->active('/docs/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
-                        <li class="mb-3">
-                            <a href="{{ $page->baseUrl }}/docs/flexbox-display" class="hover:underline block mb-2 {{ $page->active('/docs/flexbox-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
-                            <ul class="pl-4 {{ $page->active('/docs/flexbox-') ? 'block' : 'hidden' }}">
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-display" class="hover:underline {{ $page->active('/docs/flexbox-display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-direction" class="hover:underline {{ $page->active('/docs/flexbox-direction') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Direction</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-wrapping" class="hover:underline {{ $page->active('/docs/flexbox-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-justify-content" class="hover:underline {{ $page->active('/docs/flexbox-justify-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Justify Content</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-items" class="hover:underline {{ $page->active('/docs/flexbox-align-items') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Items</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-content" class="hover:underline {{ $page->active('/docs/flexbox-align-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Content</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-align-self" class="hover:underline {{ $page->active('/docs/flexbox-align-self') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Self</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/flexbox-flex-grow-shrink" class="hover:underline {{ $page->active('/docs/flexbox-flex-grow-shrink') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flex, Grow, &amp; Shrink</a></li>
-                            </ul>
-                        </li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/floats" class="hover:underline {{ $page->active('/docs/floats') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Floats</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/forms" class="hover:underline {{ $page->active('/docs/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Forms</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/grid" class="hover:underline {{ $page->active('/docs/grid') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Grid</a></li>
-                        <li class="mb-3">
-                            <a href="{{ $page->baseUrl }}/docs/cursor" class="hover:underline block mb-2 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Interactivity</a>
-                            <ul class="pl-4 {{ $page->active(['/docs/cursor', '/docs/resize', '/docs/pointer-events', '/docs/user-select']) ? 'block' : 'hidden' }}">
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/cursor" class="hover:underline {{ $page->active('/docs/cursor') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Cursor</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/resize" class="hover:underline {{ $page->active('/docs/resize') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Resize</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/pointer-events" class="hover:underline {{ $page->active('/docs/pointer-events') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Pointer Events</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/user-select" class="hover:underline {{ $page->active('/docs/user-select') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">User Select</a></li>
-                            </ul>
-                        </li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/lists" class="hover:underline {{ $page->active('/docs/lists') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Lists</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/opacity" class="hover:underline {{ $page->active('/docs/opacity') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Opacity</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/overflow" class="hover:underline {{ $page->active('/docs/overflow') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Overflow</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/positioning" class="hover:underline {{ $page->active('/docs/positioning') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Positioning</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/shadows" class="hover:underline {{ $page->active('/docs/shadows') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Shadows</a></li>
-                        <li class="mb-3">
-                            <a href="{{ $page->baseUrl }}/docs/width" class="hover:underline block mb-2 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a>
-                            <ul class="pl-4 {{ $page->active(['/docs/width', '/docs/min-width', '/docs/max-width', '/docs/height', '/docs/min-height', '/docs/max-height']) ? 'block' : 'hidden' }}">
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/width" class="hover:underline {{ $page->active('/docs/width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/min-width" class="hover:underline {{ $page->active('/docs/min-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Width</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/max-width" class="hover:underline {{ $page->active('/docs/max-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Width</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/height" class="hover:underline {{ $page->active('/docs/height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Height</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/min-height" class="hover:underline {{ $page->active('/docs/min-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Height</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/max-height" class="hover:underline {{ $page->active('/docs/max-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Height</a></li>
-                            </ul>
-                        </li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/spacing" class="hover:underline {{ $page->active('/docs/spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/svg" class="hover:underline {{ $page->active('/docs/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
-                        <li class="mb-3">
-                            <a href="{{ $page->baseUrl }}/docs/fonts" class="hover:underline block mb-2 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/text-alignment',  '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
-                            <ul class="pl-4 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/text-alignment',  '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'block' : 'hidden' }}">
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/fonts" class="hover:underline {{ $page->active('/docs/fonts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Fonts</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-color" class="hover:underline {{ $page->active('/docs/text-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-sizing" class="hover:underline {{ $page->active('/docs/text-sizing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/font-weight" class="hover:underline {{ $page->active('/docs/font-weight') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Weight</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-alignment" class="hover:underline {{ $page->active('/docs/text-alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Alignment</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/line-height" class="hover:underline {{ $page->active('/docs/line-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Line Height</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/letter-spacing" class="hover:underline {{ $page->active('/docs/letter-spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Letter Spacing</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/text-style" class="hover:underline {{ $page->active('/docs/text-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style &amp; Decoration</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/whitespace-and-wrapping" class="hover:underline {{ $page->active('/docs/whitespace-and-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Whitespace &amp; Wrapping</a></li>
-                            </ul>
-                        </li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/vertical-alignment" class="hover:underline {{ $page->active('/docs/vertical-alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Vertical Alignment</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/visibility" class="hover:underline {{ $page->active('/docs/visibility') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Visibility</a></li>
-                        <li class="mb-3"><a href="{{ $page->baseUrl }}/docs/z-index" class="hover:underline {{ $page->active('/docs/z-index') ? 'text-slate-darker font-bold' : '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="hover:underline {{ $page->active('/docs/examples/alerts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/alerts">Alerts</a></li>
-                        <li class="mb-3"><a class="hover:underline {{ $page->active('/docs/examples/buttons') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/buttons">Buttons</a></li>
-                        <li class="mb-3"><a class="hover:underline {{ $page->active('/docs/examples/cards') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/cards">Cards</a></li>
-                        <li class="mb-3"><a class="hover:underline {{ $page->active('/docs/examples/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/forms">Forms</a></li>
-                        <li class="mb-3"><a class="hover:underline {{ $page->active('/docs/examples/navigation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/navigation">Navigation</a></li>
-                    </ul>
-                </div>
-            </nav>
+        <p class="text-center">
+          <a href="https://github.com/tailwindcss/tailwindcss/releases" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a>
+        </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">
+        <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
+          <svg class="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>
         </div>
+      </div>
     </div>
-    <div class="md:ml-80">
-        <div class="fixed w-full z-20">
-            <div class="pin-t bg-white md:hidden relative border-b border-grey-light h-12 flex items-center">
-                  <div id="sidebar-open" class="absolute pin-l pin-y px-4 flex items-center">
-                      <svg class="w-4 h-4 cursor-pointer text-grey" role="button" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
-                  </div>
-                  <a href="/" class="mx-auto inline-flex items-center">
-                      <svg class="w-8 h-8" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg>
-                  </a>
-                  <div id="sidebar-close" class="hidden">
-                    <div class="flex items-center absolute pin-r pin-y px-4">
-                      <svg class="w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
-                    </div>
-                  </div>
-            </div>
-        </div>
-        <div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto">
-            <div id="app" v-cloak>
-                <div class="markdown">
-                    @yield('content')
-                </div>
-            </div>
-            <script src="/js/app.js"></script>
+    <div class="p-8 flex-1 overflow-y-scroll">
+      <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>
+          <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>
+              @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>
+                  <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 }}">
+                        {{ $title }}
+                      </a>
+                    </li>
+                  @endforeach
+                  </ul>
+                </li>
+              @endif
+            @endforeach
+          </ul>
         </div>
+        @endforeach
+      </nav>
     </div>
+    <div class="border-t border-smoke 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="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>
+        </a>
+        <a class="block flex items-center hover:text-grey-darker" href="https://twitter.com/tailwindcss">
+          <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Twitter</title><path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"/></svg>
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="md:ml-80">
+    <div class="fixed w-full z-20">
+      <div class="pin-t bg-white md:hidden relative border-b border-grey-light h-12 flex items-center">
+        <div id="sidebar-open" class="absolute pin-l pin-y px-4 flex items-center">
+          <svg class="w-4 h-4 cursor-pointer text-grey" role="button" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+        </div>
+        <a href="/" class="mx-auto inline-flex items-center">
+          <svg class="w-8 h-8" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoGradient)" fill-rule="evenodd"/></svg>
+        </a>
+        <div id="sidebar-close" class="hidden">
+          <div class="flex items-center absolute pin-r pin-y px-4">
+            <svg class="w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto">
+      <div id="app" v-cloak>
+        <div class="markdown">
+          <h1>{{ $page->title }}</h1>
+          @if ($page->description)
+            <div class="text-xl text-slate-light mb-4">
+              {{ $page->description }}
+            </div>
+          @endif
+          @if ($page->features)
+            @include('_partials.feature-badges', $page->features->all())
+          @endif
+          @yield('content')
+        </div>
+      </div>
+      <script src="/js/app.js"></script>
+    </div>
+  </div>
 </div>
 
 <svg style="height: 0; width: 0; position: absolute; visibility: hidden;">
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index ec91299ad..91f364cb2 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -1,37 +1,50 @@
 <!DOCTYPE html>
 <html lang="en" class="bg-white 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">
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="/manifest.json">
-        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00b4b6">
+<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">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00b4b6">
+  <title>{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }}</title>
+  <meta name="theme-color" content="#ffffff">
+  @yield('meta')
+  <style>
+    @import url("https://use.typekit.net/iqy1okj.css");
+  </style>
+  <link rel="stylesheet" href="{{ mix('/css/main.css') }}">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+  <script src="{{ mix('/js/nav.js') }}"></script>
+</head>
+<body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
 
-        @yield('meta')
+@yield('body')
 
-        <meta name="theme-color" content="#ffffff">
-        <title>{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }}</title>
-        <style>
-          @import url("https://use.typekit.net/iqy1okj.css");
-        </style>
-        <link rel="stylesheet" href="{{ mix('/css/main.css') }}">
-        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
-        <script src="{{ mix('/js/nav.js') }}"></script>
-    </head>
-    <body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
-        @yield('body')
-        @if ($page->production)
-        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109068504-1"></script>
-        <script>
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
+@if ($page->production)
+  <!-- Algolia DocSearch  -->
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+  <script type="text/javascript">
+    docsearch({
+      apiKey: '3df93446658cd9c4e314d4c02a052188',
+      indexName: 'tailwindcss',
+      inputSelector: '#docsearch',
+    });
+  </script>
 
-          gtag('config', 'UA-109068504-1');
-        </script>
-        @endif
-    </body>
+  <!-- Google Analytics  -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109068504-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-109068504-1');
+  </script>
+@endif
+
+</body>
 </html>
diff --git a/docs/source/_partials/customized-config.blade.php b/docs/source/_partials/customized-config.blade.php
index 494c3336e..f69383f2a 100644
--- a/docs/source/_partials/customized-config.blade.php
+++ b/docs/source/_partials/customized-config.blade.php
@@ -1,21 +1,18 @@
 <div class="border-2 border-smoke rounded mb-8">
-    <div class="bg-smoke-lighter 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>
-        <div>{!! collect(explode("\n", $slot))->map(function ($line) {
-            if (starts_with($line, '+')) {
-                return '<div class="text-blue-dark"><span class="text-blue-light">+</span>&nbsp;&nbsp;&nbsp;' . e(trim(substr($line, 1))) . '</div>';
-
-            }
-
-            if (starts_with($line, '-')) {
-                return '<div class="text-grey"><span class="text-grey">-</span>&nbsp;&nbsp;&nbsp;' . e(trim(substr($line, 1))) . '</div>';
-            }
-
-            return '<div class="text-grey-darker">&nbsp;&nbsp;&nbsp;&nbsp;' . e(trim($line)) . '</div>';
-        })->implode("\n") !!}</div>
-        <div class="whitespace-pre text-grey-dark">{{ '  }' }}</div>
-        <div class="whitespace-pre text-grey-dark">{{ '}' }}</div>
-    </div>
+  <div class="bg-smoke-lighter 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>
+    <div>{!! collect(explode("\n", $slot))->map(function ($line) {
+      if (starts_with($line, '+')) {
+        return '<div class="text-blue-dark"><span class="text-blue-light">+</span>&nbsp;&nbsp;&nbsp;' . e(trim(substr($line, 1))) . '</div>';
+      }
+      if (starts_with($line, '-')) {
+        return '<div class="text-grey"><span class="text-grey">-</span>&nbsp;&nbsp;&nbsp;' . e(trim(substr($line, 1))) . '</div>';
+      }
+      return '<div class="text-grey-darker">&nbsp;&nbsp;&nbsp;&nbsp;' . e(trim($line)) . '</div>';
+    })->implode("\n") !!}</div>
+    <div class="whitespace-pre text-grey-dark">  }</div>
+    <div class="whitespace-pre text-grey-dark">}</div>
+  </div>
 </div>
diff --git a/docs/source/_partials/feature-badges.blade.php b/docs/source/_partials/feature-badges.blade.php
index 69d01a5cf..4f2be45b5 100644
--- a/docs/source/_partials/feature-badges.blade.php
+++ b/docs/source/_partials/feature-badges.blade.php
@@ -1,67 +1,67 @@
 <div class="mb-6">
-    <div class="flex flex-wrap -mb-2">
-        @if ($responsive)
-        <a href="#responsive" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-            <span class="inline-flex rounded-full bg-green-light text-white mr-1">
-                <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
-            </span>
-            <span>Responsive</span>
-        </a>
-        @else
-        <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-            <span class="inline-flex rounded-full bg-grey text-white mr-1">
-                <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
-            </span>
-            <span>Responsive</span>
-        </span>
-        @endif
+  <div class="flex flex-wrap -mb-2">
+    @if ($responsive)
+    <a href="#responsive" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
+      </span>
+      <span>Responsive</span>
+    </a>
+    @else
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
+      </span>
+      <span>Responsive</span>
+    </span>
+    @endif
 
-        @if ($customizable)
-        <a href="#customizing" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-            <span class="inline-flex rounded-full bg-green-light text-white mr-1">
-                <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
-            </span>
-            <span>Customizable</span>
-        </a>
-        @else
-        <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-            <span class="inline-flex rounded-full bg-grey text-white mr-1">
-                <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
-            </span>
-            <span>Customizable</span>
-        </span>
-        @endif
+    @if ($customizable)
+    <a href="#customizing" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
+      </span>
+      <span>Customizable</span>
+    </a>
+    @else
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
+      </span>
+      <span>Customizable</span>
+    </span>
+    @endif
 
-        @if ($hover)
-        <a href="#hover" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-            <span class="inline-flex rounded-full bg-green-light text-white mr-1">
-                <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
-            </span>
-            <span>Hover</span>
-        </a>
-        @else
-        <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-            <span class="inline-flex rounded-full bg-grey text-white mr-1">
-                <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
-            </span>
-            <span>Hover</span>
-        </span>
-        @endif
+    @if ($hover)
+    <a href="#hover" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
+      </span>
+      <span>Hover</span>
+    </a>
+    @else
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
+      </span>
+      <span>Hover</span>
+    </span>
+    @endif
 
-        @if ($focus)
-        <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-            <span class="inline-flex rounded-full bg-green-light text-white mr-1">
-                <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
-            </span>
-            <span>Focus</span>
-        </span>
-        @else
-        <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-            <span class="inline-flex rounded-full bg-grey text-white mr-1">
-                <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
-            </span>
-            <span>Focus</span>
-        </span>
-        @endif
-    </div>
+    @if ($focus)
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
+      </span>
+      <span>Focus</span>
+    </span>
+    @else
+    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
+      </span>
+      <span>Focus</span>
+    </span>
+    @endif
+  </div>
 </div>
diff --git a/docs/source/_partials/responsive-code-sample.blade.php b/docs/source/_partials/responsive-code-sample.blade.php
index 5af92edeb..88b44c632 100644
--- a/docs/source/_partials/responsive-code-sample.blade.php
+++ b/docs/source/_partials/responsive-code-sample.blade.php
@@ -1,9 +1,9 @@
 <div class="mt-8 v-cloak-hidden">
-    <responsive-code-sample code="{{ e($code) }}">
-        <div slot="none">{{ $none }}</div>
-        <div slot="sm">{{ $sm }}</div>
-        <div slot="md">{{ $md }}</div>
-        <div slot="lg">{{ $lg }}</div>
-        <div slot="xl">{{ $xl }}</div>
-    </responsive-code-sample>
+  <responsive-code-sample code="{{ e($code) }}">
+    <div slot="none">{{ $none }}</div>
+    <div slot="sm">{{ $sm }}</div>
+    <div slot="md">{{ $md }}</div>
+    <div slot="lg">{{ $lg }}</div>
+    <div slot="xl">{{ $xl }}</div>
+  </responsive-code-sample>
 </div>
diff --git a/docs/source/_partials/work-in-progress-example.blade.php b/docs/source/_partials/work-in-progress-example.blade.php
new file mode 100644
index 000000000..be08a866d
--- /dev/null
+++ b/docs/source/_partials/work-in-progress-example.blade.php
@@ -0,0 +1,13 @@
+<div class="mt-8">
+  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
+    <div class="flex">
+      <div class="py-1">
+        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+      </div>
+      <div>
+        <p class="font-semibold">Work in progress!</p>
+        <p class="text-sm">More detailed examples are coming soon.</p>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/docs/source/docs/adding-new-utilities.blade.md b/docs/source/docs/adding-new-utilities.blade.md
index ea477be47..577736884 100644
--- a/docs/source/docs/adding-new-utilities.blade.md
+++ b/docs/source/docs/adding-new-utilities.blade.md
@@ -1,10 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Adding New Utilities"
+description: null
 ---
 
-# Adding New Utilities
-
 Although Tailwind provides a pretty comprehensive set of utility classes out of the box, you're inevitably going to run into situations where you need to add a few of your own.
 
 Deciding on the best way to extend a framework can be paralyzing, so here's some best practices and tools to help you add your own utilities "the Tailwind way."
@@ -45,7 +44,6 @@ For example, given the following CSS:
 
 For this reason, **we recommend defining any custom utility classes at the end of your stylesheet,** *after* you inject Tailwind's utility classes:
 
-
 ```less
 @@tailwind preflight;
 
@@ -141,5 +139,3 @@ html { ... }
   }
 }
 ```
-
-
diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md
index 45ad4cb2e..ec36b4da9 100644
--- a/docs/source/docs/background-color.blade.md
+++ b/docs/source/docs/background-color.blade.md
@@ -1,42 +1,35 @@
 ---
 extends: _layouts.documentation
-title: "Backgrounds"
+title: "Background Color"
+description: "Utilities for controlling an element's background color."
+features:
+  responsive: true
+  customizable: true
+  hover: true
+  focus: false
 ---
 
-# Background Color
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling an element's background color.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => true,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            @foreach ($page->config['colors'] as $name => $value)
-                <tr>
-                    <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark">.bg-{{ $name }}</td>
-                    <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">color: {{ $value }};</td>
-                    <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the background color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
-                </tr>
-            @endforeach
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      @foreach ($page->config['colors'] as $name => $value)
+      <tr>
+        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark">.bg-{{ $name }}</td>
+        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">background-color: {{ $value }};</td>
+        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the background color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
+      </tr>
+      @endforeach
+    </tbody>
+  </table>
 </div>
 
 ## Hover
diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md
index c2ee40acb..c0d2dbf0e 100644
--- a/docs/source/docs/background-position.blade.md
+++ b/docs/source/docs/background-position.blade.md
@@ -1,78 +1,71 @@
 ---
 extends: _layouts.documentation
 title: "Background Position"
+description: "Utilities for controlling the position of an element's background image."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Background Position
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the position of an element's background image.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-bottom</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: bottom;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Place the background image on the bottom edge.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-center</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: center;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image in the center.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left edge.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-bottom</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left bottom;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left bottom edge.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-top</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left top;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left top edge.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right edge.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-bottom</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right bottom;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right bottom edge.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-top</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right top;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right top edge.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-top</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: top;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the top edge.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-bottom</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: bottom;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Place the background image on the bottom edge.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-center</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: center;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image in the center.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left edge.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-bottom</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left bottom;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left bottom edge.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-top</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left top;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left top edge.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right edge.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-bottom</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right bottom;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right bottom edge.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-top</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right top;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right top edge.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-top</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: top;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the top edge.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md
index bbf65bcc6..d8c591b93 100644
--- a/docs/source/docs/background-size.blade.md
+++ b/docs/source/docs/background-size.blade.md
@@ -1,48 +1,41 @@
 ---
 extends: _layouts.documentation
 title: "Background Size"
+description: "Utilities for controlling the background size of an element's background image."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Background Size
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the background size of an element's background image.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.bg-cover</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">background-position: cover;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Scale the image until it fills the background layer.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-contain</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: contain;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Scale the image to the outer edges without cropping or stretching.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.bg-cover</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">background-size: cover;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Scale the image until it fills the background layer.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-contain</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-size: contain;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Scale the image to the outer edges without cropping or stretching.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md
index cadd9fd2e..a55a18f57 100644
--- a/docs/source/docs/border-color.blade.md
+++ b/docs/source/docs/border-color.blade.md
@@ -1,52 +1,44 @@
 ---
 extends: _layouts.documentation
 title: "Border Color"
+description: "Utilities for controlling the color of an element's borders."
+features:
+  responsive: true
+  customizable: true
+  hover: true
+  focus: false
 ---
 
-# Border Color
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the color of an element's borders.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => true,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            @foreach ($page->config['colors'] as $name => $value)
-                <tr>
-                    <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark">.border-{{ $name }}</td>
-                    <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">color: {{ $value }};</td>
-                    <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the border color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
-                </tr>
-            @endforeach
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      @foreach ($page->config['colors'] as $name => $value)
+        <tr>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark">.border-{{ $name }}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">border-color: {{ $value }};</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the border color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
+        </tr>
+      @endforeach
+    </tbody>
+  </table>
 </div>
 
-
 ## Hover
 
 In addition to the standard responsive variations, border colors also come in `hover:` variations that apply the given border color on hover.
 
 @component('_partials.code-sample', ['class' => 'text-center'])
 <button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold rounded">
-    Button
+  Button
 </button>
 @endcomponent
 
diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md
index ae5cef3dc..320a21f9a 100644
--- a/docs/source/docs/border-radius.blade.md
+++ b/docs/source/docs/border-radius.blade.md
@@ -1,95 +1,88 @@
 ---
 extends: _layouts.documentation
 title: "Border Radius"
+description: "Utilities for controlling the border radius of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Border Radius
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the border radius of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse; table-layout: fixed;">
-        <colgroup>
-            <col class="w-1/6">
-            <col class="w-1/3">
-            <col class="w-1/2">
-        </colgroup>
-        <thead>
-            <tr>
-                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-            </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.rounded</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-radius: .25rem;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a medium border radius to all corners of an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-sm</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .125rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to all corners of an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-lg</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .5rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to all corners of an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-full</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 9999px;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round all corners of an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-none</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 0;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from all sides of an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-t</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    border-bottom-left-radius: 0;<br>
-                    border-bottom-right-radius: 0;
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the top corners of an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-r</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    border-top-left-radius: 0;<br>
-                    border-bottom-left-radius: 0;
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the right side corners of an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-b</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    border-top-right-radius: 0;<br>
-                    border-top-left-radius: 0;
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the bottom corners of an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-l</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    border-top-right-radius: 0;<br>
-                    border-bottom-right-radius: 0;
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the left side corners of an element.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/6">
+      <col class="w-1/3">
+      <col class="w-1/2">
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.rounded</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-radius: .25rem;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a medium border radius to all corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to all corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to all corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 9999px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round all corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from all sides of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-t</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          border-bottom-left-radius: 0;<br>
+          border-bottom-right-radius: 0;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the top corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-r</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          border-top-left-radius: 0;<br>
+          border-bottom-left-radius: 0;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the right side corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-b</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          border-top-right-radius: 0;<br>
+          border-top-left-radius: 0;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the bottom corners of an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-l</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          border-top-right-radius: 0;<br>
+          border-bottom-right-radius: 0;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only round the left side corners of an element.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ## Rounded corners
@@ -159,32 +152,32 @@ 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="bg-grey w-12 h-12 rounded"></div>
+  <div class="bg-grey w-12 h-12 rounded"></div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-    <div class="bg-grey w-12 h-12 rounded rounded-t"></div>
+  <div class="bg-grey w-12 h-12 rounded rounded-t"></div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-    <div class="bg-grey w-12 h-12 rounded-lg rounded-b"></div>
+  <div class="bg-grey w-12 h-12 rounded-lg rounded-b"></div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-    <div class="bg-grey w-12 h-12 rounded-none"></div>
+  <div class="bg-grey w-12 h-12 rounded-none"></div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-    <div class="bg-grey w-12 h-12 rounded rounded-r"></div>
+  <div class="bg-grey w-12 h-12 rounded rounded-r"></div>
 </div>
 @endslot
 @slot('code')
 <div class="none:rounded sm:rounded-t md:rounded-lg md:rounded-b lg:rounded-none xl:rounded xl:rounded-r ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/border-style.blade.md b/docs/source/docs/border-style.blade.md
index 9ce653edf..cbba8a87f 100644
--- a/docs/source/docs/border-style.blade.md
+++ b/docs/source/docs/border-style.blade.md
@@ -1,53 +1,46 @@
 ---
 extends: _layouts.documentation
 title: "Border Style"
+description: "Utilities for controlling the style of an element's borders."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Border Style
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the style of an element's borders.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.border-solid</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-style: solid;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the border style on an element to solid.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.border-dashed</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-style: dashed;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the border style on an element to dashed.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.border-dotted</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-style: dotted;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Sets the border style on an element to dotted.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.border-none</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-style: none;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables the border on an element.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.border-solid</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-style: solid;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the border style on an element to solid.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.border-dashed</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-style: dashed;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the border style on an element to dashed.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.border-dotted</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-style: dotted;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Sets the border style on an element to dotted.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.border-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-style: none;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables the border on an element.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md
index da33dce64..19dca9611 100644
--- a/docs/source/docs/border-width.blade.md
+++ b/docs/source/docs/border-width.blade.md
@@ -1,21 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Border Width"
+description: "Utilities for controlling the width an element's borders."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Border Width
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the width an element's borders.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 Add borders to any element using the `.border{-side?}{-width?}` syntax.
@@ -23,24 +16,24 @@ Add borders to any element using the `.border{-side?}{-width?}` syntax.
 For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element.
 
 <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><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><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><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">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>
-    </div>
+  <div class="pr-12">
+    <div class="mb-3 text-slate 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><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><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">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>
+  </div>
 </div>
diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md
index 14a94fbc2..e4ca285b7 100644
--- a/docs/source/docs/colors.blade.md
+++ b/docs/source/docs/colors.blade.md
@@ -1,10 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Colors"
+description: null
 ---
 
-# Colors
-
 Developing an organized, consistent and beautiful color palette is critical to the design success of a project. Tailwind provides a fantastic color system that makes this very easy to accomplish.
 
 ## Default color palette
@@ -24,7 +23,7 @@ To get you started, we've provided a generous palette of great looking colors th
       <div class="text-black bg-white px-6 py-3 text-sm font-semibold flex justify-between">
         <span>White</span>
         <span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['white']) }}</span>
-        </div>
+      </div>
       <div class="text-grey-darkest 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>
@@ -450,12 +449,8 @@ You'll notice above that the color palette is also assigned to the `colors` key
 .error { color: config('colors.grey-darker') }
 ```
 
-<!-- Document how to customize your color palette, using regular JS features in your config file to avoid duplication, merging colors, etc. -->
-
 ## Naming
 
-<!-- Talk about naming, how it's easy to use color-based names or hierarchy-based names, whatever floats your boat -->
-
 In the default color palette we've used literal color names, like `red`, `green` and `blue`. Another common approach to naming colors is choosing functional names based on how the colors are used, such as `primary`, `secondary`, and `brand`.
 
 You can also choose different approaches to how you name your color variants. In the default color palette we've again used literal variants, like `light`, `dark`, and `darker`. Another common approach here is to use a numeric scale, like `100`, `200` and `300`.
diff --git a/docs/source/docs/configuration.blade.md b/docs/source/docs/configuration.blade.md
index 1906fe38a..f6ba338ae 100644
--- a/docs/source/docs/configuration.blade.md
+++ b/docs/source/docs/configuration.blade.md
@@ -1,10 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Configuration"
+description: null
 ---
 
-# Configuration
-
 Tailwind's defining feature is its ability to be customized. We understand that no two projects are the same, so why should the CSS framework you use be? Tailwind provides developers with a helpful set of front-end conventions, while still leaving room for adjustments where appropriate. This is all done using the Tailwind config file.
 
 ## Introducing the Tailwind config
@@ -18,7 +17,7 @@ Tailwind is actually built on PostCSS and therefore is configured entirely in Ja
 We recommend creating a `tailwind.js` file in your project's root, but really it can go wherever you want. We've provided a CLI utility to do this easily:
 
 <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="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
 </div>
 
 Alternatively, you can simply copy the default config below.
diff --git a/docs/source/docs/container.blade.md b/docs/source/docs/container.blade.md
index 72a8c1ab5..9f79aa78b 100644
--- a/docs/source/docs/container.blade.md
+++ b/docs/source/docs/container.blade.md
@@ -1,54 +1,49 @@
 ---
 extends: _layouts.documentation
 title: "Container"
+description: "A component for fixing an element's width to the current breakpoint."
 ---
 
-# Container
-
-<div class="text-xl text-slate-light mb-4">
-    A component for fixing an element's width to the current breakpoint.
-</div>
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/4">
-            <col class="w-1/4">
-            <col class="w-1/2">
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Breakpoint</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-          </tr>
-        </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>
-            </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>
-            </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>
-            </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>
-            </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>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/4">
+      <col class="w-1/4">
+      <col class="w-1/2">
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Breakpoint</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+      </tr>
+    </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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 Tailwind's `.container` class sets the `max-width` of an element to match the `min-width` of the current breakpoint.
@@ -59,7 +54,7 @@ To center a container, use the `.mx-auto` utility:
 
 ```html
 <div class="container mx-auto">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 ```
 
@@ -67,7 +62,6 @@ To add horizontal padding, use the `.px-{size}` utilities:
 
 ```html
 <div class="container mx-auto px-4">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 ```
-
diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md
index 8fa2a639d..0dc255e54 100644
--- a/docs/source/docs/cursor.blade.md
+++ b/docs/source/docs/cursor.blade.md
@@ -1,53 +1,46 @@
 ---
 extends: _layouts.documentation
 title: "Cursor"
+description: "Utilities for controlling the cursor style when hovering over an element."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Cursor
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the cursor style when hovering over an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/4">
-            <col class="w-1/4">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-auto</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: auto;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to the default browser behavior.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-pointer</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: pointer;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to a pointer and indicate a link.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-not-allowed</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: not-allowed;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to indicate that the action will not be executed.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/4">
+      <col class="w-1/4">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-auto</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: auto;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to the default browser behavior.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-pointer</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: pointer;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to a pointer and indicate a link.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-not-allowed</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: not-allowed;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to indicate that the action will not be executed.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/display.blade.md b/docs/source/docs/display.blade.md
index 76cd49852..a802df2c2 100644
--- a/docs/source/docs/display.blade.md
+++ b/docs/source/docs/display.blade.md
@@ -1,78 +1,71 @@
 ---
 extends: _layouts.documentation
 title: "Display"
+description: "Utilities for controlling the display box type of an element."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Display
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the display box type of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.block</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">display: block;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the box type of the element to <code>block</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.inline-block</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: inline-block;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>inline-block</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.inline</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: inline;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>inline</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.table</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: table;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>table</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.table-row</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: table-row;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>table-row</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.table-cell</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: table-cell;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>table-cell</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.hidden</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: none;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>none</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.flex</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: flex;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>flex</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.inline-flex</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: inline-flex;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>inline-flex</code>.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.block</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">display: block;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the box type of the element to <code>block</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.inline-block</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: inline-block;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>inline-block</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.inline</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: inline;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>inline</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.table</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: table;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>table</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.table-row</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: table-row;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>table-row</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.table-cell</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: table-cell;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>table-cell</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.hidden</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: none;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>none</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.flex</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: flex;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>flex</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.inline-flex</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: inline-flex;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>inline-flex</code>.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/examples/alerts.blade.md b/docs/source/docs/examples/alerts.blade.md
index 8b8461e05..d35f4b55b 100644
--- a/docs/source/docs/examples/alerts.blade.md
+++ b/docs/source/docs/examples/alerts.blade.md
@@ -1,23 +1,10 @@
 ---
 extends: _layouts.documentation
 title: "Alerts"
+description: null
 ---
 
-# Alerts
-
-<div class="mt-8">
-  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
-    <div class="flex">
-      <div class="py-1">
-        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
-      </div>
-      <div>
-        <p class="font-semibold">Work in progress!</p>
-        <p class="text-sm">More detailed documentation is coming soon, but in the meantime here's a bunch of quick examples.</p>
-      </div>
-    </div>
-  </div>
-</div>
+@include('_partials.work-in-progress-example')
 
 ### Traditional
 
@@ -58,9 +45,7 @@ title: "Alerts"
 @component('_partials.code-sample', ['lang' => 'html'])
 <div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3" role="alert">
   <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
-  <p>
-    Something happened that you should know about.
-  </p>
+  <p>Something happened that you should know about.</p>
 </div>
 @endcomponent
 
diff --git a/docs/source/docs/examples/buttons.blade.md b/docs/source/docs/examples/buttons.blade.md
index 9498c1616..1e42b1e96 100644
--- a/docs/source/docs/examples/buttons.blade.md
+++ b/docs/source/docs/examples/buttons.blade.md
@@ -1,40 +1,27 @@
 ---
 extends: _layouts.documentation
 title: "Buttons"
+description: null
 ---
 
-# Buttons
-
-<div class="mt-8">
-  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
-    <div class="flex">
-      <div class="py-1">
-        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
-      </div>
-      <div>
-        <p class="font-semibold">Work in progress!</p>
-        <p class="text-sm">More detailed documentation is coming soon, but in the meantime here's a bunch of quick examples.</p>
-      </div>
-    </div>
-  </div>
-</div>
+@include('_partials.work-in-progress-example')
 
 ### Simple
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
-    Button
+  Button
 </button>
 
 @slot('code')
 <!-- Using utilities: -->
 <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
-    Button
+  Button
 </button>
 
 <!-- Extracting component classes: -->
 <button class="btn btn-blue">
-    Button
+  Button
 </button>
 
 <style>
@@ -55,7 +42,7 @@ title: "Buttons"
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-full">
-    Button
+  Button
 </button>
 @endcomponent
 
@@ -63,7 +50,7 @@ title: "Buttons"
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-transparent hover:bg-blue text-blue-dark font-semibold hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
-    Button
+  Button
 </button>
 @endcomponent
 
@@ -71,7 +58,7 @@ title: "Buttons"
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border border-blue-darker rounded">
-    Button
+  Button
 </button>
 @endcomponent
 
@@ -79,7 +66,7 @@ title: "Buttons"
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
-    Button
+  Button
 </button>
 @endcomponent
 
@@ -87,7 +74,7 @@ title: "Buttons"
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue hover:bg-blue-light text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue rounded">
-    Button
+  Button
 </button>
 @endcomponent
 
@@ -95,7 +82,7 @@ title: "Buttons"
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-white hover:bg-smoke-lighter text-slate-dark font-semibold py-2 px-4 border border-slate-lighter rounded shadow">
-    Button
+  Button
 </button>
 @endcomponent
 
@@ -103,12 +90,12 @@ title: "Buttons"
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <div class="inline-flex">
-    <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded rounded-l">
-        Prev
-    </button>
-    <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded rounded-r">
-        Next
-    </button>
+  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded rounded-l">
+    Prev
+  </button>
+  <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded rounded-r">
+    Next
+  </button>
 </div>
 @endcomponent
 
@@ -116,8 +103,7 @@ title: "Buttons"
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded inline-flex items-center">
-    <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
-    <span>Download</span>
+  <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
+  <span>Download</span>
 </button>
 @endcomponent
-
diff --git a/docs/source/docs/examples/cards.blade.md b/docs/source/docs/examples/cards.blade.md
index 8cd08821e..8d6cb8815 100644
--- a/docs/source/docs/examples/cards.blade.md
+++ b/docs/source/docs/examples/cards.blade.md
@@ -1,40 +1,27 @@
 ---
 extends: _layouts.documentation
 title: "Cards"
+description: null
 ---
 
-# Cards
-
-<div class="mt-8">
-  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
-    <div class="flex">
-      <div class="py-1">
-        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
-      </div>
-      <div>
-        <p class="font-semibold">Work in progress!</p>
-        <p class="text-sm">More detailed examples are coming soon.</p>
-      </div>
-    </div>
-  </div>
-</div>
+@include('_partials.work-in-progress-example')
 
 ## Stacked
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
 <div class="max-w-sm rounded overflow-hidden shadow-lg">
-    <img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg" alt="Sunset in the mountains">
-    <div class="px-6 py-4">
-        <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
-        <p class="text-grey-darker text-base">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
-        </p>
-    </div>
-    <div class="px-6 py-4">
-        <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
-        <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
-        <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
-    </div>
+  <img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg" alt="Sunset in the mountains">
+  <div class="px-6 py-4">
+    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
+    <p class="text-grey-darker text-base">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
+    </p>
+  </div>
+  <div class="px-6 py-4">
+    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
+    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
+    <span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
+  </div>
 </div>
 @endcomponent
 
@@ -42,25 +29,25 @@ title: "Cards"
 
 @component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
 <div class="max-w-md flex">
-    <div class="rounded rounded-l w-128 text-center overflow-hidden">
-        <img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg" alt="Woman holding a mug">
+  <div class="rounded rounded-l w-128 text-center overflow-hidden">
+    <img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg" alt="Woman holding a mug">
+  </div>
+  <div class="border-t border-r border-b border-grey-light rounded rounded-r p-4 flex flex-col justify-between">
+    <div>
+      <p class="text-sm text-grey-dark flex items-center">
+        <svg class="text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
+        Members only
+      </p>
+      <div class="text-black font-bold text-xl mb-2">Can coffee make you a better developer?</div>
+      <p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
     </div>
-    <div class="border-t border-r border-b border-grey-light rounded rounded-r p-4 flex flex-col justify-between">
-        <div>
-            <p class="text-sm text-grey-dark flex items-center">
-                <svg class="text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
-                Members only
-            </p>
-            <div class="text-black font-bold text-xl mb-2">Can coffee make you a better developer?</div>
-            <p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
-        </div>
-        <div class="flex items-center">
-            <img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
-            <div class="text-sm">
-                <p class="text-black leading-none">Jonathan Reinink</p>
-                <p class="text-grey-dark">Aug 18</p>
-            </div>
-        </div>
+    <div class="flex items-center">
+      <img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
+      <div class="text-sm">
+        <p class="text-black leading-none">Jonathan Reinink</p>
+        <p class="text-grey-dark">Aug 18</p>
+      </div>
     </div>
+  </div>
 </div>
 @endcomponent
diff --git a/docs/source/docs/examples/forms.blade.md b/docs/source/docs/examples/forms.blade.md
index d6fe11ed3..14598d3be 100644
--- a/docs/source/docs/examples/forms.blade.md
+++ b/docs/source/docs/examples/forms.blade.md
@@ -1,54 +1,41 @@
 ---
 extends: _layouts.documentation
 title: "Forms"
+description: null
 ---
 
-# Forms
-
-<div class="mt-8">
-  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
-    <div class="flex">
-      <div class="py-1">
-        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
-      </div>
-      <div>
-        <p class="font-semibold">Work in progress!</p>
-        <p class="text-sm">More detailed examples are coming soon.</p>
-      </div>
-    </div>
-  </div>
-</div>
+@include('_partials.work-in-progress-example')
 
 ## Login Form
 
 @component('_partials.code-sample', ['class' => 'px-3 py-10 bg-grey-lighter flex justify-center'])
 <div class="w-full max-w-xs">
-    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <div class="mb-4">
-            <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
-                Username
-            </label>
-            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" id="username" type="text" placeholder="Username">
-        </div>
-        <div class="mb-6">
-            <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
-                Password
-            </label>
-            <input class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3" id="password" type="password" placeholder="******************">
-            <p class="text-red text-xs italic">Please choose a password.</p>
-        </div>
-        <div class="flex items-center justify-between">
-            <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" type="button">
-                Sign In
-            </button>
-            <a class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker" href="#">
-                Forgot Password?
-            </a>
-        </div>
-    </form>
-    <p class="text-center text-grey text-xs">
-        &copy;{{ date('Y') }} Acme Corp. All rights reserved.
-    </p>
+  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+    <div class="mb-4">
+      <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
+        Username
+      </label>
+      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" id="username" type="text" placeholder="Username">
+    </div>
+    <div class="mb-6">
+      <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
+        Password
+      </label>
+      <input class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3" id="password" type="password" placeholder="******************">
+      <p class="text-red text-xs italic">Please choose a password.</p>
+    </div>
+    <div class="flex items-center justify-between">
+      <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" type="button">
+        Sign In
+      </button>
+      <a class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker" href="#">
+        Forgot Password?
+      </a>
+    </div>
+  </form>
+  <p class="text-center text-grey text-xs">
+    &copy;{{ date('Y') }} Acme Corp. All rights reserved.
+  </p>
 </div>
 @endcomponent
 
@@ -56,43 +43,43 @@ title: "Forms"
 
 @component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
 <form class="w-full max-w-xs">
-    <div class="md:flex md:items-center mb-6">
-        <div class="md:w-1/3">
-            <label class="block text-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
-                Full Name
-            </label>
-        </div>
-        <div class="md:w-2/3">
-            <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-full-name" type="text" value="Jane Doe">
-        </div>
+  <div class="md:flex md:items-center mb-6">
+    <div class="md:w-1/3">
+      <label class="block text-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
+        Full Name
+      </label>
     </div>
-    <div class="md:flex md:items-center mb-6">
-        <div class="md:w-1/3">
-            <label class="block text-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-username">
-                Password
-            </label>
-        </div>
-        <div class="md:w-2/3">
-            <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-username" type="password" placeholder="******************">
-        </div>
+    <div class="md:w-2/3">
+      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-full-name" type="text" value="Jane Doe">
     </div>
-    <div class="md:flex md:items-center mb-6">
-        <div class="md:w-1/3"></div>
-        <label class="md:w-2/3 block text-grey font-bold">
-            <input class="mr-2" type="checkbox">
-            <span class="text-sm">
-                Send me your newsletter!
-            </span>
-        </label>
+  </div>
+  <div class="md:flex md:items-center mb-6">
+    <div class="md:w-1/3">
+      <label class="block text-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-username">
+        Password
+      </label>
     </div>
-    <div class="md:flex md:items-center">
-        <div class="md:w-1/3"></div>
-        <div class="md:w-2/3">
-            <button class="shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 rounded" type="button">
-                Sign Up
-            </button>
-        </div>
+    <div class="md:w-2/3">
+      <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter hover:border-purple rounded w-full py-2 px-4 text-grey-darker" id="inline-username" type="password" placeholder="******************">
     </div>
+  </div>
+  <div class="md:flex md:items-center mb-6">
+    <div class="md:w-1/3"></div>
+    <label class="md:w-2/3 block text-grey font-bold">
+      <input class="mr-2" type="checkbox">
+      <span class="text-sm">
+        Send me your newsletter!
+      </span>
+    </label>
+  </div>
+  <div class="md:flex md:items-center">
+    <div class="md:w-1/3"></div>
+    <div class="md:w-2/3">
+      <button class="shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 rounded" type="button">
+        Sign Up
+      </button>
+    </div>
+  </div>
 </form>
 @endcomponent
 
@@ -100,75 +87,74 @@ title: "Forms"
 
 @component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
 <form class="w-full max-w-md">
-    <div class="-mx-3 md:flex mb-6">
-        <div class="md:w-1/2 px-3 mb-6 md:mb-0">
-            <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
-                First Name
-            </label>
-            <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3" id="grid-first-name" type="text" placeholder="Jane">
-            <p class="text-red text-xs italic">Please fill out this field.</p>
-        </div>
-        <div class="md:w-1/2 px-3">
-            <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
-                Last Name
-            </label>
-            <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe">
-        </div>
+  <div class="-mx-3 md:flex mb-6">
+    <div class="md:w-1/2 px-3 mb-6 md:mb-0">
+      <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
+        First Name
+      </label>
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3" id="grid-first-name" type="text" placeholder="Jane">
+      <p class="text-red text-xs italic">Please fill out this field.</p>
     </div>
-    <div class="-mx-3 md:flex mb-6">
-        <div class="md:w-full px-3">
-            <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
-                Password
-            </label>
-            <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3" id="grid-password" type="password" placeholder="******************">
-            <p class="text-grey-dark text-xs italic">Make it as long and as crazy as you'd like</p>
-        </div>
+    <div class="md:w-1/2 px-3">
+      <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
+        Last Name
+      </label>
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe">
     </div>
-    <div class="-mx-3 md:flex mb-2">
-        <div class="md:w-1/2 px-3 mb-6 md:mb-0">
-            <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-city">
-                City
-            </label>
-            <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
-        </div>
-        <div class="md:w-1/2 px-3">
-            <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
-                State
-            </label>
-            <div class="relative">
-                <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" id="grid-state">
-                    <option>New Mexico</option>
-                    <option>Missouri</option>
-                    <option>Texas</option>
-                </select>
-                <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
-                    <svg class="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>
-        </div>
-        <div class="md:w-1/2 px-3">
-            <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
-                Zip
-            </label>
-            <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-zip" type="text" placeholder="90210">
-        </div>
+  </div>
+  <div class="-mx-3 md:flex mb-6">
+    <div class="md:w-full px-3">
+      <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
+        Password
+      </label>
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3" id="grid-password" type="password" placeholder="******************">
+      <p class="text-grey-dark text-xs italic">Make it as long and as crazy as you'd like</p>
     </div>
+  </div>
+  <div class="-mx-3 md:flex mb-2">
+    <div class="md:w-1/2 px-3 mb-6 md:mb-0">
+      <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-city">
+        City
+      </label>
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
+    </div>
+    <div class="md:w-1/2 px-3">
+      <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
+        State
+      </label>
+      <div class="relative">
+        <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" id="grid-state">
+          <option>New Mexico</option>
+          <option>Missouri</option>
+          <option>Texas</option>
+        </select>
+        <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
+          <svg class="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>
+    </div>
+    <div class="md:w-1/2 px-3">
+      <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
+        Zip
+      </label>
+      <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-zip" type="text" placeholder="90210">
+    </div>
+  </div>
 </form>
 @endcomponent
 
-
 ## Underline Form
 
 @component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
 <form class="w-full max-w-sm">
-    <div class="flex items-center border-b border-b-2 border-teal py-2">
-        <input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" type="text" placeholder="Jane Doe" aria-label="Full name">
-        <button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
-            Sign Up
-        </button>
-        <button class="flex-no-shrink border-transparent border-4 text-teal hover:text-teal-darker text-sm py-1 px-2 rounded" type="button">
-            Cancel
-        </button>
-    </div>
+  <div class="flex items-center border-b border-b-2 border-teal py-2">
+    <input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" type="text" placeholder="Jane Doe" aria-label="Full name">
+    <button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
+      Sign Up
+    </button>
+    <button class="flex-no-shrink border-transparent border-4 text-teal hover:text-teal-darker text-sm py-1 px-2 rounded" type="button">
+      Cancel
+    </button>
+  </div>
 </form>
 @endcomponent
diff --git a/docs/source/docs/examples/navigation.blade.md b/docs/source/docs/examples/navigation.blade.md
index b8956bbae..a68f0e563 100644
--- a/docs/source/docs/examples/navigation.blade.md
+++ b/docs/source/docs/examples/navigation.blade.md
@@ -1,40 +1,27 @@
 ---
 extends: _layouts.documentation
 title: "Navigation"
+description: null
 ---
 
-# Navigation
-
-<div class="mt-8">
-  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
-    <div class="flex">
-      <div class="py-1">
-        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
-      </div>
-      <div>
-        <p class="font-semibold">Work in progress!</p>
-        <p class="text-sm">More detailed examples are coming soon.</p>
-      </div>
-    </div>
-  </div>
-</div>
+@include('_partials.work-in-progress-example')
 
 ## Simple
 
 @component('_partials.code-sample')
-<ul class="flex">
-    <li class="mr-6">
-        <a class="text-blue hover:text-blue-darker" href="#">Active</a>
-    </li>
-    <li class="mr-6">
-        <a class="text-blue hover:text-blue-darker" href="#">Link</a>
-    </li>
-    <li class="mr-6">
-        <a class="text-blue hover:text-blue-darker" href="#">Link</a>
-    </li>
-    <li class="mr-6">
-        <a class="text-grey-light cursor-not-allowed" href="#">Disabled</a>
-    </li>
+<ul class="list-reset flex">
+  <li class="mr-6">
+    <a class="text-blue hover:text-blue-darker" href="#">Active</a>
+  </li>
+  <li class="mr-6">
+    <a class="text-blue hover:text-blue-darker" href="#">Link</a>
+  </li>
+  <li class="mr-6">
+    <a class="text-blue hover:text-blue-darker" href="#">Link</a>
+  </li>
+  <li class="mr-6">
+    <a class="text-grey-light cursor-not-allowed" href="#">Disabled</a>
+  </li>
 </ul>
 @endcomponent
 
@@ -42,97 +29,97 @@ title: "Navigation"
 
 @component('_partials.code-sample')
 <nav class="flex items-center justify-between flex-wrap bg-teal p-6">
-    <div class="flex items-center flex-no-shrink text-white mr-6">
-        <svg class="h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
-        <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
+  <div class="flex items-center flex-no-shrink text-white mr-6">
+    <svg class="h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
+    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
+  </div>
+  <div class="block lg:hidden">
+    <button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
+      <svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+    </button>
+  </div>
+  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+    <div class="text-sm lg:flex-grow">
+      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
+        Docs
+      </a>
+      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
+        Examples
+      </a>
+      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white">
+        Blog
+      </a>
     </div>
-    <div class="block lg:hidden">
-        <button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
-            <svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
-        </button>
-    </div>
-    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
-        <div class="text-sm lg:flex-grow">
-            <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
-                Docs
-            </a>
-            <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
-                Examples
-            </a>
-            <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white">
-                Blog
-            </a>
-        </div>
-        <div>
-            <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
-        </div>
+    <div>
+      <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
     </div>
+  </div>
 </nav>
 @endcomponent
 
 ## Tabs
 
 @component('_partials.code-sample')
-<ul class="flex border-b">
-    <li class="-mb-px mr-1">
-        <a class="bg-white inline-block border-l border-t border-r rounded rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
-    </li>
-    <li class="mr-1">
-        <a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
-    </li>
-    <li class="mr-1">
-        <a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
-    </li>
-    <li class="mr-1">
-        <a class="bg-white inline-block py-2 px-4 text-grey-light font-semibold" href="#">Tab</a>
-    </li>
+<ul class="list-reset flex border-b">
+  <li class="-mb-px mr-1">
+    <a class="bg-white inline-block border-l border-t border-r rounded rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
+  </li>
+  <li class="mr-1">
+    <a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
+  </li>
+  <li class="mr-1">
+    <a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
+  </li>
+  <li class="mr-1">
+    <a class="bg-white inline-block py-2 px-4 text-grey-light font-semibold" href="#">Tab</a>
+  </li>
 </ul>
 @endcomponent
 
 ## Pills
 
 @component('_partials.code-sample')
-<ul class="flex">
-    <li class="mr-3">
-        <a class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
-    </li>
-    <li class="mr-3">
-        <a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-1 px-3" href="#">Pill</a>
-    </li>
-    <li class="mr-3">
-        <a class="inline-block py-1 px-3 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
-    </li>
+<ul class="list-reset flex">
+  <li class="mr-3">
+    <a class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
+  </li>
+  <li class="mr-3">
+    <a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-1 px-3" href="#">Pill</a>
+  </li>
+  <li class="mr-3">
+    <a class="inline-block py-1 px-3 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
+  </li>
 </ul>
 @endcomponent
 
 ## Stretched
 
 @component('_partials.code-sample')
-<ul class="flex">
-    <li class="flex-1 mr-2">
-        <a class="text-center block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
-    </li>
-    <li class="flex-1 mr-2">
-        <a class="text-center block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Nav Item</a>
-    </li>
-    <li class="text-center flex-1">
-        <a class="block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Item</a>
-    </li>
+<ul class="list-reset flex">
+  <li class="flex-1 mr-2">
+    <a class="text-center block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
+  </li>
+  <li class="flex-1 mr-2">
+    <a class="text-center block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Nav Item</a>
+  </li>
+  <li class="text-center flex-1">
+    <a class="block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Item</a>
+  </li>
 </ul>
 @endcomponent
 
 ## Justified
 
 @component('_partials.code-sample')
-<ul class="flex justify-between">
-    <li class="mr-3">
-        <a class="inline-block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
-    </li>
-    <li class="mr-3">
-        <a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Pill</a>
-    </li>
-    <li class="mr-3">
-        <a class="inline-block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
-    </li>
+<ul class="list-reset flex justify-between">
+  <li class="mr-3">
+    <a class="inline-block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
+  </li>
+  <li class="mr-3">
+    <a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Pill</a>
+  </li>
+  <li class="mr-3">
+    <a class="inline-block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
+  </li>
 </ul>
 @endcomponent
diff --git a/docs/source/docs/extracting-components.blade.md b/docs/source/docs/extracting-components.blade.md
index f1bc2de1a..ce261fafd 100644
--- a/docs/source/docs/extracting-components.blade.md
+++ b/docs/source/docs/extracting-components.blade.md
@@ -1,10 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Extracting Components"
+description: null
 ---
 
-# Extracting Components
-
 Tailwind encourages a "utility-first" workflow, where new designs are initially implemented using only utility classes to avoid premature abstraction.
 
 While we strongly believe you can get a lot further with just utilities than you might initially expect, **we don't believe that a dogmatic utility*-only* approach is the best way to write CSS.**
@@ -27,7 +26,6 @@ If this is the only button in your project, creating a custom component class fo
 
 If on the other hand you were reusing this button style in several places, keeping that long list of utility classes in sync across every button instance could become a real maintenance burden.
 
-
 ## Extracting utility patterns with `@apply`
 
 When you start to notice repeating patterns of utilities in your markup, it might be worth extracting a component class.
@@ -59,7 +57,6 @@ Here's what a `.btn-blue` class might look like using `@apply` to compose it fro
 
 Note that `hover:`, `focus:`, and `{screen}:` utility variants can't be mixed in directly. Instead, apply the plain version of the utility you need to the appropriate pseudo-selector or in a new media query.
 
-
 ## Keeping things composable
 
 Say you have these two buttons:
@@ -166,7 +163,6 @@ It also allows you to add new one-off button styles without being forced to crea
 @endslot
 @endcomponent
 
-
 ## CSS Structure
 
 Since Tailwind's utility classes don't rely on `!important` to defeat other styles, it's important that you add your component classes *before* any utility classes in your CSS.
@@ -200,4 +196,3 @@ If you're using a preprocessor like Less or Sass, consider keeping your componen
 
 @@tailwind utilities;
 ```
-
diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md
index 33fb9f2f4..1970ac2c0 100644
--- a/docs/source/docs/flexbox-align-content.blade.md
+++ b/docs/source/docs/flexbox-align-content.blade.md
@@ -1,63 +1,56 @@
 ---
 extends: _layouts.documentation
-title: "Align Content - Flexbox"
+title: "Align Content"
+description: "Utilities for controlling how lines are positioned in multi-line flex containers."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Align Content
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling how lines are positioned in multi-line flex containers.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-          <col class="w-1/5">
-          <col class="w-1/3">
-          <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.content-start</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-content: flex-start;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Pack lines against the start of the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-center</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: center;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Pack lines in the center of the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-end</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: flex-end;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Pack lines against the end of the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-between</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: space-between;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Distribute lines along the cross axis by adding an equal amount of space between each line.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-around</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: space-around;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Distribute lines along the cross axis by adding an equal amount of space around each line.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.content-start</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-content: flex-start;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Pack lines against the start of the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-center</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: center;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Pack lines in the center of the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-end</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: flex-end;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Pack lines against the end of the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-between</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: space-between;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Distribute lines along the cross axis by adding an equal amount of space between each line.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-around</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: space-around;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Distribute lines along the cross axis by adding an equal amount of space around each line.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
@@ -66,21 +59,21 @@ Use `.content-start` to pack lines in a flex container against the start of the
 
 @component('_partials.code-sample')
 <div class="flex content-start flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endcomponent
 
@@ -90,21 +83,21 @@ Use `.content-center` to pack lines in a flex container in the center of the cro
 
 @component('_partials.code-sample')
 <div class="flex content-center flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endcomponent
 
@@ -114,21 +107,21 @@ Use `.content-end` to pack lines in a flex container against the end of the cros
 
 @component('_partials.code-sample')
 <div class="flex content-end flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endcomponent
 
@@ -138,21 +131,21 @@ Use `.content-between` to distribute lines in a flex container such that there i
 
 @component('_partials.code-sample')
 <div class="flex content-between flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endcomponent
 
@@ -162,25 +155,24 @@ Use `.content-around` to distribute lines in a flex container such that there is
 
 @component('_partials.code-sample')
 <div class="flex content-around flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endcomponent
 
-
 ## Responsive
 
 To control the alignment of flex content at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.
@@ -190,102 +182,102 @@ 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="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex content-end flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endslot
 @slot('md')
 <div class="flex content-center flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex content-between flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex content-around flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-1/3 p-2">
+    <div class="text-slate text-center bg-smoke p-2">5</div>
+  </div>
 </div>
 @endslot
 @slot('code')
 <div class="none:content-start sm:content-end md:content-center lg:content-between xl:content-around ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md
index 399034185..f8cb64394 100644
--- a/docs/source/docs/flexbox-align-items.blade.md
+++ b/docs/source/docs/flexbox-align-items.blade.md
@@ -1,63 +1,56 @@
 ---
 extends: _layouts.documentation
-title: "Align Items - Flexbox"
+title: "Align Items"
+description: "Utilities for controlling how flex items are positioned along a container's cross axis."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Align Items
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling how flex items are positioned along a container's cross axis.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.items-stretch</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-items: flex-stretch;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Stretch items to fill the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-start</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-start;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items against the start of the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-center</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: center;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items along the center of the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-end</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-end;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items against the end of the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-baseline</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: space-between;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the baselines of each item.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.items-stretch</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-items: flex-stretch;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Stretch items to fill the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-start</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-start;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items against the start of the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-center</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: center;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items along the center of the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-end</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-end;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items against the end of the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-baseline</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: baseline;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the baselines of each item.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Stretch <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
@@ -66,9 +59,9 @@ 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-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>
 @endcomponent
 
@@ -78,9 +71,9 @@ Use `.items-start` to align items to the start of the flex container's cross axi
 
 @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-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>
 @endcomponent
 
@@ -90,9 +83,9 @@ Use `.items-center` to align items along the center of the flex container's cros
 
 @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-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>
 @endcomponent
 
@@ -102,22 +95,21 @@ 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-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>
 @endcomponent
 
-
 ### Baseline
 
 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-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>
 @endcomponent
 
@@ -130,42 +122,42 @@ 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-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>
 @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-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>
 @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-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>
 @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-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>
 @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-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>
 @endslot
 @slot('code')
 <div class="none:items-stretch sm:items-start md:items-center lg:items-end xl:items-baseline ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md
index 1de5c8d2c..7add93855 100644
--- a/docs/source/docs/flexbox-align-self.blade.md
+++ b/docs/source/docs/flexbox-align-self.blade.md
@@ -1,58 +1,51 @@
 ---
 extends: _layouts.documentation
-title: "Align Items - Flexbox"
+title: "Align Self"
+description: "Utilities for controlling how an individual flex item is positioned along its container's cross axis."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Align Self
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling how an individual flex item is positioned along its container's cross axis.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.self-auto</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-self: auto;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Align item based on the container's <code>align-items</code> property.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-start</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: flex-start;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item against the start of the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-center</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: center;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item along the center of the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-end</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: flex-end;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item against the end of the cross axis.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-stretch</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: stretch;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Stretch item to fill the cross axis.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.self-auto</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-self: auto;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Align item based on the container's <code>align-items</code> property.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-start</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: flex-start;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item against the start of the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-center</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: center;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item along the center of the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-end</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: flex-end;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item against the end of the cross axis.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-stretch</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: stretch;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Stretch item to fill the cross axis.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Auto <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
@@ -61,9 +54,9 @@ Use `.self-auto` to align an item based on the value of the flex container's `al
 
 @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-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>
 @endcomponent
 
@@ -73,9 +66,9 @@ Use `.self-start` to align an item to the start of the flex container's cross ax
 
 @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-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>
 @endcomponent
 
@@ -85,9 +78,9 @@ Use `.self-center` to align an item along the center of the flex container's cro
 
 @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-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>
 @endcomponent
 
@@ -97,9 +90,9 @@ Use `.self-end` to align an item to the end of 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="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-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>
 @endcomponent
 
@@ -109,9 +102,9 @@ Use `.self-stretch` to stretch an item to fill 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="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-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>
 @endcomponent
 
@@ -124,44 +117,44 @@ 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-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>
 @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-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>
 @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-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>
 @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-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>
 @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-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>
 @endslot
 @slot('code')
 <div class="items-stretch ...">
-    <!-- ... -->
-    <div class="none:self-auto sm:self-start md:self-end lg:self-center xl:self-stretch ...">2</div>
-    <!-- ... -->
+  <!-- ... -->
+  <div class="none:self-auto sm:self-start md:self-end lg:self-center xl:self-stretch ...">2</div>
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md
index 149beff46..2df29a466 100644
--- a/docs/source/docs/flexbox-direction.blade.md
+++ b/docs/source/docs/flexbox-direction.blade.md
@@ -1,53 +1,46 @@
 ---
 extends: _layouts.documentation
-title: "Flex Direction - Flexbox"
+title: "Flex Direction"
+description: "Utilities for controlling the direction of flex items."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Flex Direction
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the direction of flex items.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex-row</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex-direction: row;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Position flex items in the normal horizontal direction.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-row-reverse</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: row-reverse;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items in the reverse horizontal direction.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-col</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: column;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items vertically.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-col-reverse</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: column-reverse;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items vertically in the reverse direction.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex-row</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex-direction: row;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Position flex items in the normal horizontal direction.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-row-reverse</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: row-reverse;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items in the reverse horizontal direction.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-col</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: column;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items vertically.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-col-reverse</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: column-reverse;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items vertically in the reverse direction.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Row <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
@@ -56,9 +49,9 @@ Use `.flex-row` to position flex items horizontally in the same direction as tex
 
 @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="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>
 @endcomponent
 
@@ -68,9 +61,9 @@ Use `.flex-row-reverse` to position flex items horizontally in the opposite dire
 
 @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="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>
 @endcomponent
 
@@ -80,9 +73,9 @@ 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="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>
 @endcomponent
 
@@ -92,9 +85,9 @@ Use `.flex-col-reverse` to position flex items vertically in the opposite direct
 
 @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="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>
 @endcomponent
 
@@ -107,42 +100,42 @@ 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="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>
 @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="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>
 @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="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>
 @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="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>
 @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="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>
 @endslot
 @slot('code')
 <div class="none:flex-row sm:flex-col md:flex-row-reverse lg:flex-col-reverse xl:flex-row ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md
index 1e4a29dd3..2e195f42d 100644
--- a/docs/source/docs/flexbox-display.blade.md
+++ b/docs/source/docs/flexbox-display.blade.md
@@ -1,43 +1,36 @@
 ---
 extends: _layouts.documentation
-title: "Flex Display – Flexbox"
+title: "Flex Display"
+description: "Utilities for creating flex containers."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Flex Display
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for creating flex containers.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">display: flex;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Create a block-level flex container.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.inline-flex</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">display: inline-flex;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Create an inline flex container.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">display: flex;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Create a block-level flex container.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.inline-flex</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">display: inline-flex;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Create an inline flex container.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ## Flex
@@ -46,9 +39,9 @@ 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-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>
 @endcomponent
 
@@ -58,9 +51,9 @@ 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="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>
 @endcomponent
 
@@ -73,42 +66,42 @@ 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-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>
 @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="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>
 @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="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>
 @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="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>
 @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-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>
 @endslot
 @slot('code')
 <div class="none:flex sm:inline-flex md:block lg:hidden xl:flex ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md
index 391e5af8f..d94e61e24 100644
--- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md
+++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md
@@ -1,73 +1,66 @@
 ---
 extends: _layouts.documentation
-title: "Flex, Grow, & Shrink - Flexbox"
+title: "Flex, Grow, &amp; Shrink"
+description: "Utilities for controlling how flex items grow and shrink."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Flex, Grow, & Shrink
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling how flex items grow and shrink.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex-initial</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex: initial;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Allow a flex item to shrink but not grow, taking into account its initial size.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-1</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex: 1;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to grow and shrink as needed, ignoring its initial size.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-auto</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex: auto;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to grow and shrink, taking into account its initial size.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-none</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex: none;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent a flex item from growing or shrinking.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-grow</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-grow: 1;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to grow to fill any available space.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-shrink</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-shrink: 1;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to shrink if needed.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-no-grow</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-grow: 0;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent a flex item from growing.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-no-shrink</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-shrink: 0;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent a flex item from shrinking.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex-initial</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex: initial;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Allow a flex item to shrink but not grow, taking into account its initial size.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-1</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex: 1;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to grow and shrink as needed, ignoring its initial size.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-auto</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex: auto;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to grow and shrink, taking into account its initial size.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex: none;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent a flex item from growing or shrinking.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-grow</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-grow: 1;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to grow to fill any available space.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-shrink</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-shrink: 1;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to shrink if needed.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-no-grow</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-grow: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent a flex item from growing.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-no-shrink</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-shrink: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent a flex item from shrinking.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Initial <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
@@ -77,47 +70,47 @@ Use `.flex-initial` to allow a flex item to shrink but not grow, taking into acc
 @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">
-        Short
-    </div>
-    <div class="flex-initial text-slate text-center bg-smoke 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">
+    Short
+  </div>
+  <div class="flex-initial text-slate text-center bg-smoke 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">
-        Short
-    </div>
-    <div class="flex-initial text-slate text-center bg-smoke 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">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
-    </div>
+  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+    Short
+  </div>
+  <div class="flex-initial text-slate text-center bg-smoke 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">
+    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">
-        Short
-    </div>
-    <div class="flex-initial text-slate text-center bg-smoke 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">
+    Short
+  </div>
+  <div class="flex-initial text-slate text-center bg-smoke 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">
-        Short
-    </div>
-    <div class="flex-initial text-slate text-center bg-smoke 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">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
-    </div>
+  <div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
+    Short
+  </div>
+  <div class="flex-initial text-slate text-center bg-smoke 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">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
+  </div>
 </div>
 @endslot
 @endcomponent
@@ -129,40 +122,40 @@ Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring its in
 @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">
-        Short
-    </div>
-    <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
-        Medium length
-    </div>
-    <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
-        Significantly larger amount of content
-    </div>
+  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+    Short
+  </div>
+  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+    Medium length
+  </div>
+  <div class="text-slate text-center bg-smoke 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">
-        Short
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke 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">
-        Significantly larger amount of content
-    </div>
+  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+    Short
+  </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
+    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">
-        Short
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke 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">
-        Significantly larger amount of content
-    </div>
+  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+    Short
+  </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
+    Significantly larger amount of content
+  </div>
 </div>
 @endslot
 @endcomponent
@@ -174,40 +167,40 @@ Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it
 @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">
-        Short
-    </div>
-    <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
-        Medium length
-    </div>
-    <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
-        Significantly larger amount of content
-    </div>
+  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+    Short
+  </div>
+  <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
+    Medium length
+  </div>
+  <div class="text-slate text-center bg-smoke 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">
-        Short
-    </div>
-    <div class="flex-auto text-slate text-center bg-smoke 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">
-        Significantly larger amount of content
-    </div>
+  <div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
+    Short
+  </div>
+  <div class="flex-auto text-slate text-center bg-smoke 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">
+    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">
-        Short
-    </div>
-    <div class="flex-auto text-slate text-center bg-smoke 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">
-        Significantly larger amount of content
-    </div>
+  <div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
+    Short
+  </div>
+  <div class="flex-auto text-slate text-center bg-smoke 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">
+    Significantly larger amount of content
+  </div>
 </div>
 @endslot
 @endcomponent
@@ -218,15 +211,15 @@ 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">
-        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">
-        Item that cannot grow or shrink
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
-        Item that can grow or shrink if needed
-    </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
+    Item that cannot grow or shrink
+  </div>
+  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+    Item that can grow or shrink if needed
+  </div>
 </div>
 @endcomponent
 
@@ -236,15 +229,15 @@ 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">
-        Content that cannot flex
-    </div>
-    <div class="flex-grow text-slate-dark text-center bg-smoke-dark 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">
-        Content that cannot flex
-    </div>
+  <div class="flex-none text-slate text-center bg-smoke 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">
+    Item that will grow
+  </div>
+  <div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
+    Content that cannot flex
+  </div>
 </div>
 @endcomponent
 
@@ -254,15 +247,15 @@ 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">
-        Will grow
-    </div>
-    <div class="flex-no-grow text-slate-dark text-center bg-smoke-dark 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">
-        Will grow
-    </div>
+  <div class="flex-grow text-slate text-center bg-smoke 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">
+    Will not grow
+  </div>
+  <div class="flex-grow text-slate text-center bg-smoke px-4 py-2 m-2">
+    Will grow
+  </div>
 </div>
 @endcomponent
 
@@ -272,15 +265,15 @@ 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">
-        Longer content that cannot flex
-    </div>
-    <div class="flex-shrink text-slate-dark text-center bg-smoke-dark 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">
-        Longer content that cannot flex
-    </div>
+  <div class="flex-none text-slate text-center bg-smoke 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">
+    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">
+    Longer content that cannot flex
+  </div>
 </div>
 @endcomponent
 
@@ -290,15 +283,15 @@ 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">
-        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">
-        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">
-        Item that can shrink if needed
-    </div>
+  <div class="flex-shrink text-slate text-center bg-smoke 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">
+    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">
+    Item that can shrink if needed
+  </div>
 </div>
 @endcomponent
 
@@ -311,76 +304,76 @@ 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">
-        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">
-        Responsive flex item
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
-        Item that can grow or shrink if needed
-    </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
+    Responsive flex item
+  </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
-        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">
-        Responsive flex item
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
-        Item that can grow or shrink if needed
-    </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
+    Responsive flex item
+  </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
-        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">
-        Responsive flex item
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
-        Item that can grow or shrink if needed
-    </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
+    Responsive flex item
+  </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
-        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">
-        Responsive flex item
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
-        Item that can grow or shrink if needed
-    </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
+    Responsive flex item
+  </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
-        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">
-        Responsive flex item
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
-        Item that can grow or shrink if needed
-    </div>
+  <div class="flex-1 text-slate text-center bg-smoke 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">
+    Responsive flex item
+  </div>
+  <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
+    Item that can grow or shrink if needed
+  </div>
 </div>
 @endslot
 @slot('code')
 <div class="flex ...">
-    <!-- ... -->
-    <div class="none:flex-none sm:flex-grow md:flex-shrink lg:flex-1 xl:flex-auto ...">
-        Item that cannot grow or shrink
-    </div>
-    <!-- ... -->
+  <!-- ... -->
+  <div class="none:flex-none sm:flex-grow md:flex-shrink lg:flex-1 xl:flex-auto ...">
+    Item that cannot grow or shrink
+  </div>
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md
index 30723d5a8..d658e6b76 100644
--- a/docs/source/docs/flexbox-justify-content.blade.md
+++ b/docs/source/docs/flexbox-justify-content.blade.md
@@ -1,63 +1,56 @@
 ---
 extends: _layouts.documentation
-title: "Justify Content - Flexbox"
+title: "Justify Content"
+description: "Utilities for controlling flex items are positioned along a container's main axis."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Justify Content
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling flex items are positioned along a container's main axis.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.justify-start</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">justify-content: flex-start;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Justify items against the start of the container.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-center</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: center;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items in the center of the container.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-end</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: flex-end;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items against the end of the container.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-between</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: space-between;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items by adding an equal amount of space between each one.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-around</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: space-around;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items by adding an equal amount of space around each one.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.justify-start</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">justify-content: flex-start;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Justify items against the start of the container.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-center</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: center;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items in the center of the container.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-end</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: flex-end;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items against the end of the container.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-between</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: space-between;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items by adding an equal amount of space between each one.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-around</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: space-around;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items by adding an equal amount of space around each one.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
@@ -66,9 +59,9 @@ Use `.justify-start` to justify items against the start of the flex container's
 
 @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="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>
 @endcomponent
 
@@ -78,9 +71,9 @@ Use `.justify-center` to justify items along the center of the flex container's
 
 @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="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>
 @endcomponent
 
@@ -90,22 +83,21 @@ Use `.justify-end` to justify items against the end of the flex container's main
 
 @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="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>
 @endcomponent
 
-
 ### Space between
 
 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="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>
 @endcomponent
 
@@ -115,9 +107,9 @@ Use `.justify-around` to justify items along the flex container's main axis such
 
 @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="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>
 @endcomponent
 
@@ -130,42 +122,42 @@ 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="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>
 @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="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>
 @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="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>
 @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="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>
 @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="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>
 @endslot
 @slot('code')
 <div class="none:justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md
index 6334f7416..774c8b61b 100644
--- a/docs/source/docs/flexbox-wrapping.blade.md
+++ b/docs/source/docs/flexbox-wrapping.blade.md
@@ -1,48 +1,41 @@
 ---
 extends: _layouts.documentation
-title: "Flex Wrapping - Flexbox"
+title: "Flex Wrapping"
+description: "Utilities for controlling how flex items wrap."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Flex Wrapping
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling how flex items wrap.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex-no-wrap</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex-wrap: nowrap;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Don't allow flex items to wrap.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-wrap</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-wrap: wrap;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow flex items to wrap in the normal direction.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-wrap-reverse</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-wrap: wrap-reverse;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow flex items to wrap in the reverse direction.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex-no-wrap</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex-wrap: nowrap;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Don't allow flex items to wrap.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-wrap</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-wrap: wrap;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow flex items to wrap in the normal direction.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-wrap-reverse</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-wrap: wrap-reverse;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow flex items to wrap in the reverse direction.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Don't wrap <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
@@ -51,15 +44,15 @@ Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible item
 
 @component('_partials.code-sample')
 <div class="flex flex-no-wrap bg-smoke-light">
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke p-2">3</div>
+  </div>
 </div>
 @endcomponent
 
@@ -69,15 +62,15 @@ Use `.flex-wrap` to allow flex items to wrap:
 
 @component('_partials.code-sample')
 <div class="flex flex-wrap bg-smoke-light">
-    <div class="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
+  <div class="w-2/5 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-2/5 p-2">
+    <div class="text-slate text-center bg-smoke p-2">3</div>
+  </div>
 </div>
 @endcomponent
 
@@ -87,15 +80,15 @@ 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="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
+  <div class="w-2/5 p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-2/5 p-2">
+    <div class="text-slate text-center bg-smoke p-2">3</div>
+  </div>
 </div>
 @endcomponent
 
@@ -108,72 +101,72 @@ 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="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke p-2">3</div>
+  </div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex flex-wrap bg-smoke-light">
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke p-2">3</div>
+  </div>
 </div>
 @endslot
 @slot('md')
 <div class="flex flex-wrap-reverse bg-smoke-light">
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke p-2">3</div>
+  </div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex flex-no-wrap bg-smoke-light">
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke p-2">3</div>
+  </div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex flex-wrap bg-smoke-light">
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 flex-none p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke 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>
+  <div class="w-2/5 flex-none p-2">
+    <div class="text-slate text-center bg-smoke p-2">3</div>
+  </div>
 </div>
 @endslot
 @slot('code')
 <div class="none:flex-no-wrap sm:flex-wrap md:flex-wrap-reverse lg:flex-no-wrap xl:flex-wrap ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/flexbox.blade.md b/docs/source/docs/flexbox.blade.md
deleted file mode 100644
index d6dce0728..000000000
--- a/docs/source/docs/flexbox.blade.md
+++ /dev/null
@@ -1,698 +0,0 @@
----
-extends: _layouts.documentation
-title: "Flexbox"
----
-
-# Flexbox
-
-<div class="subnav">
-    <a class="subnav-link" href="#usage">Usage</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
-</div>
-
-Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
-
-## Display
-
-### Flex
-
-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>
-@endcomponent
-
-### Inline flex
-
-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>
-@endcomponent
-
----
-
-## Flex Direction
-
-### Row
-
-Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*:
-
-@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>
-@endcomponent
-
-### Row reversed
-
-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>
-@endcomponent
-
-### Column
-
-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>
-@endcomponent
-
-### Column reversed
-
-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>
-@endcomponent
-
----
-
-## Flex Wrapping
-
-### No wrapping
-
-Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*:
-
-@component('_partials.code-sample')
-<div class="flex flex-nowrap bg-smoke-light">
-    <div class="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
-</div>
-@endcomponent
-
-### Wrap normally
-
-Use `.flex-wrap` to allow flex items to wrap:
-
-@component('_partials.code-sample')
-<div class="flex flex-wrap bg-smoke-light">
-    <div class="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
-</div>
-@endcomponent
-
-### Wrap reversed
-
-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="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-2/5 p-2">
-        <div class="text-slate text-center bg-smoke p-2">3</div>
-    </div>
-</div>
-@endcomponent
-
----
-
-## Justify Content
-
-### Start
-
-Use `.justify-start` to justify items against the start of the flex container's main axis *(this is also the default behavior)*:
-
-@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>
-@endcomponent
-
-### End
-
-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>
-@endcomponent
-
-### Center
-
-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>
-@endcomponent
-
-### Space between
-
-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>
-@endcomponent
-
-### Space around
-
-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>
-@endcomponent
-
----
-
-## Align Items
-
-### Stretch
-
-Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*:
-
-@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>
-@endcomponent
-
-### Start
-
-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>
-@endcomponent
-
-### End
-
-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>
-@endcomponent
-
-### Center
-
-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>
-@endcomponent
-
-### Baseline
-
-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>
-@endcomponent
-
----
-
-## Align Content
-
-### Start
-
-Use `.content-start` to pack lines in a flex container against the start of the main axis *(this is also the default behavior)*:
-
-@component('_partials.code-sample')
-<div class="flex content-start flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
-</div>
-@endcomponent
-
-### Center
-
-Use `.content-center` to pack lines in a flex container in the center of the main axis:
-
-@component('_partials.code-sample')
-<div class="flex content-center flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
-</div>
-@endcomponent
-
-### End
-
-Use `.content-end` to pack lines in a flex container against the end of the main axis:
-
-@component('_partials.code-sample')
-<div class="flex content-end flex-wrap bg-smoke-light h-48">
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
-</div>
-@endcomponent
-
-### Space between
-
-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="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
-</div>
-@endcomponent
-
-### Space around
-
-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="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke 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>
-    <div class="w-1/3 p-2">
-        <div class="text-slate text-center bg-smoke p-2">5</div>
-    </div>
-</div>
-@endcomponent
-
----
-
-## Flex
-
-### 1
-
-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">
-        Short
-    </div>
-    <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
-        Medium length
-    </div>
-    <div class="text-slate text-center bg-smoke 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">
-        Short
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke 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">
-        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">
-        Short
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke 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">
-        Significantly larger amount of content
-    </div>
-</div>
-@endslot
-@endcomponent
-
-### Auto
-
-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">
-        Short
-    </div>
-    <div class="text-slate text-center bg-smoke px-4 py-2 m-2">
-        Medium length
-    </div>
-    <div class="text-slate text-center bg-smoke 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">
-        Short
-    </div>
-    <div class="flex-auto text-slate text-center bg-smoke 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">
-        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">
-        Short
-    </div>
-    <div class="flex-auto text-slate text-center bg-smoke 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">
-        Significantly larger amount of content
-    </div>
-</div>
-@endslot
-@endcomponent
-
-### None
-
-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">
-        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">
-        Item that cannot grow or shrink
-    </div>
-    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
-        Item that can grow or shrink if needed
-    </div>
-</div>
-@endcomponent
-
-### Initial
-
-Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size *(this is also the default behavior)*:
-
-@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">
-        Short
-    </div>
-    <div class="flex-initial text-slate text-center bg-smoke 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">
-        Short
-    </div>
-    <div class="flex-initial text-slate text-center bg-smoke 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">
-        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">
-        Short
-    </div>
-    <div class="flex-initial text-slate text-center bg-smoke 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">
-        Short
-    </div>
-    <div class="flex-initial text-slate text-center bg-smoke 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">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
-    </div>
-</div>
-@endslot
-@endcomponent
-
----
-
-## Flex Grow
-
-### Grow
-
-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">
-        Content that cannot flex
-    </div>
-    <div class="flex-grow text-slate-dark text-center bg-smoke-dark 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">
-        Content that cannot flex
-    </div>
-</div>
-@endcomponent
-
-### Don't grow
-
-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">
-        Will grow
-    </div>
-    <div class="flex-no-grow text-slate-dark text-center bg-smoke-dark 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">
-        Will grow
-    </div>
-</div>
-@endcomponent
-
----
-
-## Flex shrink
-
-### Shrink
-
-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">
-        Longer content that cannot flex
-    </div>
-    <div class="flex-shrink text-slate-dark text-center bg-smoke-dark 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">
-        Longer content that cannot flex
-    </div>
-</div>
-@endcomponent
-
-### Don't shrink
-
-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">
-        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">
-        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">
-        Item that can shrink if needed
-    </div>
-</div>
-@endcomponent
-
----
-
-## Align Self
-
-### Start
-
-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>
-@endcomponent
-
-### End
-
-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>
-@endcomponent
-
-### Center
-
-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>
-@endcomponent
-
-### Stretch
-
-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>
-@endcomponent
diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md
index 68fd26766..4ede9a383 100644
--- a/docs/source/docs/floats.blade.md
+++ b/docs/source/docs/floats.blade.md
@@ -1,59 +1,52 @@
 ---
 extends: _layouts.documentation
 title: "Floats"
+description: "Utilities for controlling the wrapping of content around an element."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Floats
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the wrapping of content around an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.float-right</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">float: right;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Moves the element to the right side of its container.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.float-left</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">float: left;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Moves the element to the left side of its container.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.float-none</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">float: none;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Removes any previously defined float value.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.clearfix</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">
-                    &amp;:after {<br>
-                    &nbsp;&nbsp;content: "";<br>
-                    &nbsp;&nbsp;display: table;<br>
-                    &nbsp;&nbsp;clear: both;<br>
-                    }
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Clear any floats within an element.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.float-right</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">float: right;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Moves the element to the right side of its container.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.float-left</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">float: left;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Moves the element to the left side of its container.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.float-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">float: none;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Removes any previously defined float value.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.clearfix</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">
+          &amp;:after {<br>
+          &nbsp;&nbsp;content: "";<br>
+          &nbsp;&nbsp;display: table;<br>
+          &nbsp;&nbsp;clear: both;<br>
+          }
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Clear any floats within an element.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md
index d8a6477bd..ad6a6cc21 100644
--- a/docs/source/docs/font-weight.blade.md
+++ b/docs/source/docs/font-weight.blade.md
@@ -1,78 +1,71 @@
 ---
 extends: _layouts.documentation
 title: "Font Weight"
+description: "Utilities for controlling the font weight of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Font Weight
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the font weight of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-hairline</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 100;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to hairline.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-thin</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 200;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to thin.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-light</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 300;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to light.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-normal</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 400;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to normal.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-medium</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 500;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to medium.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-semibold</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 600;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to semibold.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-bold</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 700;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to bold.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-extrabold</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 800;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to extrabold.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-black</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 900;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to black.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-hairline</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 100;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to hairline.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-thin</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 200;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to thin.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-light</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 300;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to light.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-normal</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 400;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to normal.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-medium</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 500;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to medium.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-semibold</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 600;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to semibold.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-bold</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 700;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to bold.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-extrabold</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 800;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to extrabold.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-black</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 900;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to black.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md
index cba4d4e67..404405a57 100644
--- a/docs/source/docs/fonts.blade.md
+++ b/docs/source/docs/fonts.blade.md
@@ -1,53 +1,46 @@
 ---
 extends: _layouts.documentation
 title: "Font Families"
+description: "Utilities for controlling the font family of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Font Families
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the font family of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-2/5">
-            <col class="w-2/5">
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-sans</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font family to the sans font stack.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-serif</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font family to the serif font stack.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-mono</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font family to the mono font stack.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-2/5">
+      <col class="w-2/5">
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-sans</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font family to the sans font stack.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-serif</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font family to the serif font stack.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-mono</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font family to the mono font stack.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md
index 34fff99e9..dd3911541 100644
--- a/docs/source/docs/forms.blade.md
+++ b/docs/source/docs/forms.blade.md
@@ -1,45 +1,38 @@
 ---
 extends: _layouts.documentation
 title: "Forms"
+description: "Utilities for styling form controls."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Forms
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for styling form controls.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.appearance-none</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">appearance: none;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Remove any special styling applied to an element by the browser.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.appearance-none</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">appearance: none;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Remove any special styling applied to an element by the browser.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Custom Select
@@ -48,13 +41,13 @@ Form controls are great candidates for component classes, but just for fun, here
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <div class="inline-block relative w-64">
-    <select class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded shadow">
-        <option>Really long option that will likely overlap the chevron</option>
-        <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">
-        <svg class="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>
+  <select class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded shadow">
+    <option>Really long option that will likely overlap the chevron</option>
+    <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">
+    <svg class="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>
 @endcomponent
diff --git a/docs/source/docs/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md
index 0f3f5d754..967019d2f 100644
--- a/docs/source/docs/functions-and-directives.blade.md
+++ b/docs/source/docs/functions-and-directives.blade.md
@@ -1,15 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Functions &amp; Directives"
+description: null
 ---
 
-# Functions & Directives
-
 Tailwind exposes a few custom CSS functions and directives that can be used in your actual CSS files.
 
 ### `@@tailwind`
 
-Use the `@@tailwind` directive to insert Tailwind's `preflight` and `utilities` styles into your CSS. Here's a full example of how you might do this:
+Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and `screen` styles into your CSS. Here's a full example of how you might do this:
 
 ```less
 /**
@@ -26,6 +25,13 @@ Use the `@@tailwind` directive to insert Tailwind's `preflight` and `utilities`
  * config file.
  */
 @@tailwind utilities;
+
+/**
+ * (Optional)
+ * This injects the utility classes and styles wrapped by the @@responsive directive.
+ * These will be appended at the end of the stylesheet if the `@@tailwind screens` directive is not used.
+ */
+ @@tailwind screens;
 ```
 
 ### `@@apply`
@@ -163,4 +169,3 @@ Use the `config()` function to access your Tailwind config values using dot nota
   color: #a61611;
 }
 ```
-
diff --git a/docs/source/docs/grid.blade.md b/docs/source/docs/grid.blade.md
index c9f23166d..8c4a6012d 100644
--- a/docs/source/docs/grid.blade.md
+++ b/docs/source/docs/grid.blade.md
@@ -1,261 +1,244 @@
 ---
 extends: _layouts.documentation
 title: "Grid"
+description: null
 ---
 
-# Grid
+@include('_partials.work-in-progress-example')
 
-<div class="mt-8">
-  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
-    <div class="flex">
-      <div class="py-1">
-        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+Basic grid example:
+
+<div class="bg-smoke-light font-semibold text-sm mb-6">
+  <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
+  <div class="flex flex-wrap">
+    <div class="w-full md:w-1/3">
+      <div class="text-center py-4 bg-slate text-white">
+        .md:w-1/3
       </div>
-      <div>
-        <p class="font-semibold">Work in progress!</p>
-        <p class="text-sm">More detailed documentation is coming soon, but in the meantime here are some quick and dirty examples.</p>
+    </div>
+    <div class="w-full md:w-1/3">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        .md:w-1/3
+      </div>
+    </div>
+    <div class="w-full md:w-1/3">
+      <div class="text-center py-4 bg-slate text-white">
+        .md:w-1/3
       </div>
     </div>
   </div>
 </div>
 
-Basic grid example:
-
-<div class="bg-smoke-light font-semibold text-sm mb-6">
-    <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
-    <div class="flex flex-wrap">
-        <div class="w-full md:w-1/3">
-            <div class="text-center py-4 bg-slate text-white">
-                .md:w-1/3
-            </div>
-        </div>
-        <div class="w-full md:w-1/3">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                .md:w-1/3
-            </div>
-        </div>
-        <div class="w-full md:w-1/3">
-            <div class="text-center py-4 bg-slate text-white">
-                .md:w-1/3
-            </div>
-        </div>
-    </div>
-</div>
-
 Columns don't need to fill a row:
 
 <div class="bg-smoke-light font-semibold text-sm mb-6">
-    <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
-    <div class="flex flex-wrap">
-        <div class="w-full md:w-1/4">
-            <div class="text-center py-4 bg-slate text-white">
-                .md:w-1/4
-            </div>
-        </div>
-        <div class="w-full md:w-1/4">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                .md:w-1/4
-            </div>
-        </div>
-        <div class="w-full md:w-1/4">
-            <div class="text-center py-4 bg-slate text-white">
-                .md:w-1/4
-            </div>
-        </div>
+  <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
+  <div class="flex flex-wrap">
+    <div class="w-full md:w-1/4">
+      <div class="text-center py-4 bg-slate text-white">
+        .md:w-1/4
+      </div>
     </div>
+    <div class="w-full md:w-1/4">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        .md:w-1/4
+      </div>
+    </div>
+    <div class="w-full md:w-1/4">
+      <div class="text-center py-4 bg-slate text-white">
+        .md:w-1/4
+      </div>
+    </div>
+  </div>
 </div>
 
-
 Columns can be different widths:
 
 <div class="bg-smoke-light font-semibold text-sm mb-6">
-    <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
-    <div class="flex flex-wrap">
-        <div class="w-full md:w-1/4">
-            <div class="text-center py-4 bg-slate text-white">
-                .md:w-1/4
-            </div>
-        </div>
-        <div class="w-full md:w-1/2">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                .md:w-1/2
-            </div>
-        </div>
-        <div class="w-full md:w-1/4">
-            <div class="text-center py-4 bg-slate text-white">
-                .md:w-1/4
-            </div>
-        </div>
+  <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
+  <div class="flex flex-wrap">
+    <div class="w-full md:w-1/4">
+      <div class="text-center py-4 bg-slate text-white">
+        .md:w-1/4
+      </div>
     </div>
+    <div class="w-full md:w-1/2">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        .md:w-1/2
+      </div>
+    </div>
+    <div class="w-full md:w-1/4">
+      <div class="text-center py-4 bg-slate text-white">
+        .md:w-1/4
+      </div>
+    </div>
+  </div>
 </div>
 
-
 Rows can overflow and wrap:
 
 <div class="bg-smoke-light font-semibold text-sm mb-6">
-    <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
-    <div class="flex flex-wrap">
-        <div class="w-full md:w-1/3">
-            <div class="text-center py-4 bg-slate text-white">
-                .md:w-1/3
-            </div>
-        </div>
-        <div class="w-full md:w-1/3">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                .md:w-1/3
-            </div>
-        </div>
-        <div class="w-full md:w-1/3">
-            <div class="text-center py-4 bg-slate text-white">
-                .md:w-1/3
-            </div>
-        </div>
-        <div class="w-full md:w-1/3">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                .md:w-1/3
-            </div>
-        </div>
-        <div class="w-full md:w-1/3">
-            <div class="text-center py-4 bg-slate text-white">
-                .md:w-1/3
-            </div>
-        </div>
+  <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
+  <div class="flex flex-wrap">
+    <div class="w-full md:w-1/3">
+      <div class="text-center py-4 bg-slate text-white">
+        .md:w-1/3
+      </div>
     </div>
+    <div class="w-full md:w-1/3">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        .md:w-1/3
+      </div>
+    </div>
+    <div class="w-full md:w-1/3">
+      <div class="text-center py-4 bg-slate text-white">
+        .md:w-1/3
+      </div>
+    </div>
+    <div class="w-full md:w-1/3">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        .md:w-1/3
+      </div>
+    </div>
+    <div class="w-full md:w-1/3">
+      <div class="text-center py-4 bg-slate text-white">
+        .md:w-1/3
+      </div>
+    </div>
+  </div>
 </div>
 
 Columns can have gutters:
 
 <div class="bg-smoke-light font-semibold text-sm mb-6">
-    <div class="text-slate p-4 leading-none">.flex.flex-wrap.-mx-4</div>
-    <div class="flex flex-wrap -mx-4">
-        <div class="w-full md:w-1/3 px-4">
-            <div class="text-center py-4 bg-slate text-white">
-                <div>.w-full</div>
-                <div>.md:w-1/3</div>
-                <div>.px-4</div>
-            </div>
-        </div>
-        <div class="w-full md:w-1/3 px-4">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                <div>.w-full</div>
-                <div>.md:w-1/3</div>
-                <div>.px-4</div>
-            </div>
-        </div>
-        <div class="w-full md:w-1/3 px-4">
-            <div class="text-center py-4 bg-slate text-white">
-                <div>.w-full</div>
-                <div>.md:w-1/3</div>
-                <div>.px-4</div>
-            </div>
-        </div>
+  <div class="text-slate p-4 leading-none">.flex.flex-wrap.-mx-4</div>
+  <div class="flex flex-wrap -mx-4">
+    <div class="w-full md:w-1/3 px-4">
+      <div class="text-center py-4 bg-slate text-white">
+        <div>.w-full</div>
+        <div>.md:w-1/3</div>
+        <div>.px-4</div>
+      </div>
     </div>
+    <div class="w-full md:w-1/3 px-4">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        <div>.w-full</div>
+        <div>.md:w-1/3</div>
+        <div>.px-4</div>
+      </div>
+    </div>
+    <div class="w-full md:w-1/3 px-4">
+      <div class="text-center py-4 bg-slate text-white">
+        <div>.w-full</div>
+        <div>.md:w-1/3</div>
+        <div>.px-4</div>
+      </div>
+    </div>
+  </div>
 </div>
 
-
 Column widths can be automatic:
 
 <div class="bg-smoke-light font-semibold text-sm mb-6">
-    <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
-    <div class="flex flex-wrap">
-        <div class="w-1/4 md:flex-1 md:w-auto">
-            <div class="text-center py-4 bg-slate text-white">
-                <div>.w-1/4</div>
-                <div>.md:flex-1</div>
-                <div>.md:w-auto</div>
-            </div>
-        </div>
-        <div class="w-1/4 md:flex-1 md:w-auto">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                <div>.w-1/4</div>
-                <div>.md:flex-1</div>
-                <div>.md:w-auto</div>
-            </div>
-        </div>
-        <div class="w-1/4 md:flex-1 md:w-auto">
-            <div class="text-center py-4 bg-slate text-white">
-                <div>.w-1/4</div>
-                <div>.md:flex-1</div>
-                <div>.md:w-auto</div>
-            </div>
-        </div>
-        <div class="w-1/4 md:flex-1 md:w-auto">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                <div>.w-1/4</div>
-                <div>.md:flex-1</div>
-                <div>.md:w-auto</div>
-            </div>
-        </div>
-        <div class="w-1/4 md:flex-1 md:w-auto">
-            <div class="text-center py-4 bg-slate text-white">
-                <div>.w-1/4</div>
-                <div>.md:flex-1</div>
-                <div>.md:w-auto</div>
-            </div>
-        </div>
+  <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
+  <div class="flex flex-wrap">
+    <div class="w-1/4 md:flex-1 md:w-auto">
+      <div class="text-center py-4 bg-slate text-white">
+        <div>.w-1/4</div>
+        <div>.md:flex-1</div>
+        <div>.md:w-auto</div>
+      </div>
     </div>
+    <div class="w-1/4 md:flex-1 md:w-auto">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        <div>.w-1/4</div>
+        <div>.md:flex-1</div>
+        <div>.md:w-auto</div>
+      </div>
+    </div>
+    <div class="w-1/4 md:flex-1 md:w-auto">
+      <div class="text-center py-4 bg-slate text-white">
+        <div>.w-1/4</div>
+        <div>.md:flex-1</div>
+        <div>.md:w-auto</div>
+      </div>
+    </div>
+    <div class="w-1/4 md:flex-1 md:w-auto">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        <div>.w-1/4</div>
+        <div>.md:flex-1</div>
+        <div>.md:w-auto</div>
+      </div>
+    </div>
+    <div class="w-1/4 md:flex-1 md:w-auto">
+      <div class="text-center py-4 bg-slate text-white">
+        <div>.w-1/4</div>
+        <div>.md:flex-1</div>
+        <div>.md:w-auto</div>
+      </div>
+    </div>
+  </div>
 </div>
 
 Fixed width columns are still respected even if a smaller screen has auto column widths:
 
 <div class="bg-smoke-light font-semibold text-sm mb-6">
-    <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
-    <div class="flex flex-wrap">
-        <div class="flex-grow md:w-1/6 md:flex-none">
-            <div class="text-center py-4 bg-slate text-white">
-                <div>.flex-grow</div>
-                <div>.md:w-1/6</div>
-                <div>.md:flex-none</div>
-            </div>
-        </div>
-        <div class="flex-grow md:w-1/6 md:flex-none">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                <div>.flex-grow</div>
-                <div>.md:w-1/6</div>
-                <div>.md:flex-none</div>
-            </div>
-        </div>
-        <div class="flex-grow md:w-1/6 md:flex-none">
-            <div class="text-center py-4 bg-slate text-white">
-                <div>.flex-grow</div>
-                <div>.md:w-1/6</div>
-                <div>.md:flex-none</div>
-            </div>
-        </div>
-        <div class="flex-grow md:w-1/6 md:flex-none">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                <div>.flex-grow</div>
-                <div>.md:w-1/6</div>
-                <div>.md:flex-none</div>
-            </div>
-        </div>
-        <div class="flex-grow md:w-1/6 md:flex-none">
-            <div class="text-center py-4 bg-slate text-white">
-                <div>.flex-grow</div>
-                <div>.md:w-1/6</div>
-                <div>.md:flex-none</div>
-            </div>
-        </div>
+  <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
+  <div class="flex flex-wrap">
+    <div class="flex-grow md:w-1/6 md:flex-none">
+      <div class="text-center py-4 bg-slate text-white">
+        <div>.flex-grow</div>
+        <div>.md:w-1/6</div>
+        <div>.md:flex-none</div>
+      </div>
     </div>
+    <div class="flex-grow md:w-1/6 md:flex-none">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        <div>.flex-grow</div>
+        <div>.md:w-1/6</div>
+        <div>.md:flex-none</div>
+      </div>
+    </div>
+    <div class="flex-grow md:w-1/6 md:flex-none">
+      <div class="text-center py-4 bg-slate text-white">
+        <div>.flex-grow</div>
+        <div>.md:w-1/6</div>
+        <div>.md:flex-none</div>
+      </div>
+    </div>
+    <div class="flex-grow md:w-1/6 md:flex-none">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        <div>.flex-grow</div>
+        <div>.md:w-1/6</div>
+        <div>.md:flex-none</div>
+      </div>
+    </div>
+    <div class="flex-grow md:w-1/6 md:flex-none">
+      <div class="text-center py-4 bg-slate text-white">
+        <div>.flex-grow</div>
+        <div>.md:w-1/6</div>
+        <div>.md:flex-none</div>
+      </div>
+    </div>
+  </div>
 </div>
 
-
 Use margin auto utilities to accomplish offsets:
 
 <div class="bg-smoke-light font-semibold text-sm mb-6">
-    <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
-    <div class="flex flex-wrap">
-        <div class="w-full md:w-1/3 md:ml-auto">
-            <div class="text-center py-4 bg-slate-dark text-white">
-                <div>.md:w-1/3</div>
-                <div>.md:ml-auto</div>
-            </div>
-        </div>
-        <div class="w-full md:w-1/3 md:mr-auto">
-            <div class="text-center py-4 bg-slate text-white">
-                <div>.md:w-1/6</div>
-                <div>.md:mr-auto</div>
-            </div>
-        </div>
+  <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
+  <div class="flex flex-wrap">
+    <div class="w-full md:w-1/3 md:ml-auto">
+      <div class="text-center py-4 bg-slate-dark text-white">
+        <div>.md:w-1/3</div>
+        <div>.md:ml-auto</div>
+      </div>
     </div>
+    <div class="w-full md:w-1/3 md:mr-auto">
+      <div class="text-center py-4 bg-slate text-white">
+        <div>.md:w-1/6</div>
+        <div>.md:mr-auto</div>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md
index fc86e6b11..3d6d9ef99 100644
--- a/docs/source/docs/height.blade.md
+++ b/docs/source/docs/height.blade.md
@@ -1,123 +1,116 @@
 ---
 extends: _layouts.documentation
 title: "Height"
+description: "Utilities for setting the height of an element"
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Height
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for setting the height of an element
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.h-1</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">height: 0.25rem;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's height to <code>0.25rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-2</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 0.5rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>0.5rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-3</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 0.75rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>0.75rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-4</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 1rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>1rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-6</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 1.5rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>1.5rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-8</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 2rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>2rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-10</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 2.5rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>2.5rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-12</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 3rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>3rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-16</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 4rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>4rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-24</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 6rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>6rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-32</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 8rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>8rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-48</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 12rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>12rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-64</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 16rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>16rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-auto</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: auto;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>auto</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-px</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 1px;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>1px</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-full</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 100%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>100%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-screen</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 100vh;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>100vh</code>.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.h-1</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">height: 0.25rem;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's height to <code>0.25rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-2</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 0.5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>0.5rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-3</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 0.75rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>0.75rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-4</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 1rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>1rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-6</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 1.5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>1.5rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-8</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 2rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>2rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-10</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 2.5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>2.5rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-12</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 3rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>3rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-16</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 4rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>4rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-24</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 6rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>6rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-32</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 8rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>8rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-48</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 12rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>12rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-64</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 16rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>16rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-auto</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: auto;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>auto</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-px</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 1px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>1px</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 100%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>100%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-screen</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 100vh;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>100vh</code>.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/installation.blade.md b/docs/source/docs/installation.blade.md
index e53e46504..7d56f5393 100644
--- a/docs/source/docs/installation.blade.md
+++ b/docs/source/docs/installation.blade.md
@@ -1,36 +1,55 @@
 ---
 extends: _layouts.documentation
 title: "Installation"
+description: "Quick start guide for installing and configuring Tailwind CSS."
 ---
 
-# Installation
+## CDN
 
-<div class="text-xl text-slate-light mb-4">
-    Quick start guide for installing and configuring Tailwind.
-</div>
+Before getting started please note, **many of the features that make Tailwind CSS great are not available using the CDN builds.** To take full advantage of Tailwind's features, [install Tailwind via npm](#npm).
 
-## 1. Install Tailwind via npm
+To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
+```
+
+Or if you'd like to pull in the base styles separate from the utility classes:
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css" rel="stylesheet">
+
+<!-- Any of your own CSS would go here -->
+
+<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css" rel="stylesheet">
+```
+
+## NPM
+
+For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind via npm.
+
+### 1. Install Tailwind via npm
 
 Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
 
-<div class="bg-smoke-lighter font-mono text-sm p-4">
-    <div class="text-smoke-darker"># 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-purple-dark">yarn add <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--dev</span></div>
+<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="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-purple-dark">yarn add <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--dev</span></div>
 </div>
 
-## 2. Create a Tailwind config file
+### 2. Create a Tailwind config file
 
-Tailwind is configured almost entirely in plain JavaScript. To do this you'll need to generate a Tailwind config file for your project. We recommend creating a `tailwind.js` file in your project's root. We've provided a CLI utility to do this easily:
+Tailwind is configured almost entirely in plain JavaScript. To do this you'll need to generate a Tailwind config file for your project. We recommend creating a `tailwind.js` file in your project's root.
 
-<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>
+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>
 
-Alternatively, you can simply copy the default config file [from here](https://github.com/tailwindcss/tailwindcss/blob/master/defaultConfig.js).
-
-## 3. Use Tailwind in your CSS
+### 3. Use Tailwind in your CSS
 
 Use the `@@tailwind` directive to inject Tailwind's `preflight` and `utilities` styles into your CSS.
 
@@ -52,12 +71,12 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
  * override them.
  *
  * Example:
- * 
+ *
  * .btn { ... }
  * .form-input { ... }
  *
  * Or if using a preprocessor:
- * 
+ *
  * @@import "components/buttons";
  * @@import "components/forms";
  */
@@ -78,23 +97,23 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
  * .skew-45 { ... }
  *
  * Or if using a preprocessor..
- * 
- * @@import "utilities/backgrond-patterns";
+ *
+ * @@import "utilities/background-patterns";
  * @@import "utilities/skew-transforms";
  */
 ```
 
-## 4. Process your CSS with Tailwind
+### 4. Process your CSS with Tailwind
 
-### Using Tailwind CLI
+#### Using Tailwind CLI
 
 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 ./config.js] [-o ./output.css]</span></div>
+  <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>
 
-### Using Tailwind with PostCSS
+#### Using Tailwind with PostCSS
 
 For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain.
 
@@ -124,19 +143,19 @@ Add `tailwindcss` to the list of plugins you pass to [gulp-postcss](https://gith
 
 ```js
 gulp.task('css', function () {
-    var postcss = require('gulp-postcss');
-    var tailwindcss = require('tailwindcss');
+  var postcss = require('gulp-postcss');
+  var tailwindcss = require('tailwindcss');
 
-    return gulp.src('src/styles.css')
-        // ...
-        .pipe(postcss([
-          // ...
-          tailwindcss('./path/to/your/tailwind-config.js'),
-          require('autoprefixer'),
-          // ...
-        ]))
-        // ...
-        .pipe(gulp.dest('build/'));
+  return gulp.src('src/styles.css')
+    // ...
+    .pipe(postcss([
+      // ...
+      tailwindcss('./path/to/your/tailwind-config.js'),
+      require('autoprefixer'),
+      // ...
+    ]))
+    // ...
+    .pipe(gulp.dest('build/'));
 });
 ```
 
diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md
index e133ff9b9..7103bce87 100644
--- a/docs/source/docs/letter-spacing.blade.md
+++ b/docs/source/docs/letter-spacing.blade.md
@@ -1,48 +1,41 @@
 ---
 extends: _layouts.documentation
 title: "Letter Spacing"
+description: "Utilities for controlling the tracking (letter spacing) of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Letter Spacing
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the tracking (letter spacing) of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-tight</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">letter-spacing: -0.05em;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the letter spacing of an element to <code>-0.05em</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-normal</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">letter-spacing: 0;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the letter spacing of an element to <code>0</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-wide</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">letter-spacing: 0.05em;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the letter spacing of an element to <code>0.05em</code>.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-tight</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">letter-spacing: -0.05em;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the letter spacing of an element to <code>-0.05em</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-normal</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">letter-spacing: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the letter spacing of an element to <code>0</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-wide</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">letter-spacing: 0.05em;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the letter spacing of an element to <code>0.05em</code>.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md
index 1d9f1f4b2..408b11351 100644
--- a/docs/source/docs/line-height.blade.md
+++ b/docs/source/docs/line-height.blade.md
@@ -1,53 +1,46 @@
 ---
 extends: _layouts.documentation
 title: "Line Height"
+description: "Utilities for controlling the leading (line height) of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Line Height
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the leading (line height) of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-none</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">line-height: 1;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the line height of an element to <code>1</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-tight</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 1.25;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>1.25</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-normal</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 1.5;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>1.5</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-loose</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 2;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>2</code>.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-none</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">line-height: 1;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the line height of an element to <code>1</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-tight</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 1.25;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>1.25</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-normal</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 1.5;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>1.5</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-loose</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 2;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>2</code>.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md
index 7895cfd11..258ab6f80 100644
--- a/docs/source/docs/lists.blade.md
+++ b/docs/source/docs/lists.blade.md
@@ -1,47 +1,40 @@
 ---
 extends: _layouts.documentation
 title: "Lists"
+description: "Utilities for controlling list styles."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Lists
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling list styles.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.list-reset</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">
-                  list-style: none;<br>
-                  margin: 0;<br>
-                  padding: 0;
-                </td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Disable default browser styling for list elements.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.list-reset</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">
+          list-style: none;<br>
+          margin: 0;<br>
+          padding: 0;
+        </td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Disable default browser styling for list elements.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md
index a6e10804e..887e62ed0 100644
--- a/docs/source/docs/max-height.blade.md
+++ b/docs/source/docs/max-height.blade.md
@@ -1,50 +1,41 @@
 ---
 extends: _layouts.documentation
 title: "Max-Height"
+description: "Utilities for setting the maximum height of an element"
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Max-Height
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for setting the maximum height of an element
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.max-h-full</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-height: 100%;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's maximum height to <code>100%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-h-screen</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-height: 100vh;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum height to <code>100vh</code>.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.max-h-full</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-height: 100%;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's maximum height to <code>100%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-h-screen</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-height: 100vh;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum height to <code>100vh</code>.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
-
-
diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md
index 1f9fb28e7..d7a3c5e05 100644
--- a/docs/source/docs/max-width.blade.md
+++ b/docs/source/docs/max-width.blade.md
@@ -1,36 +1,29 @@
 ---
 extends: _layouts.documentation
 title: "Max-Width"
+description: "Utilities for setting the maximum width of an element"
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Max-Width
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for setting the maximum width of an element
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
+    <table class="w-full text-left table-collapse">
         <colgroup>
             <col class="w-1/5">
             <col class="w-1/3">
             <col>
         </colgroup>
         <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
+            <tr>
+                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+            </tr>
         </thead>
         <tbody class="align-baseline">
             <tr>
@@ -86,4 +79,3 @@ title: "Max-Width"
         </tbody>
     </table>
 </div>
-
diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md
index 8731f6091..247162589 100644
--- a/docs/source/docs/min-height.blade.md
+++ b/docs/source/docs/min-height.blade.md
@@ -1,55 +1,46 @@
 ---
 extends: _layouts.documentation
 title: "Min-Height"
+description: "Utilities for setting the minimum height of an element"
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Min-Height
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for setting the minimum height of an element
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.min-h-0</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">min-height: 0;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's minimum height to <code>0</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-h-full</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-height: 100%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum height to <code>100%</code>.</td>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-h-screen</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-height: 100vh;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum height to <code>100vh</code>.</td>
-            </tr>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.min-h-0</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">min-height: 0;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's minimum height to <code>0</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-h-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-height: 100%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum height to <code>100%</code>.</td>
+        <tr>
+          <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-h-screen</td>
+          <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-height: 100vh;</td>
+          <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum height to <code>100vh</code>.</td>
+        </tr>
+      </tr>
+    </tbody>
+  </table>
 </div>
-
-
diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md
index 0ba5d58ef..b1055d746 100644
--- a/docs/source/docs/min-width.blade.md
+++ b/docs/source/docs/min-width.blade.md
@@ -1,49 +1,41 @@
 ---
 extends: _layouts.documentation
 title: "Min-Width"
+description: "Utilities for setting the minimum width of an element"
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Min-Width
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for setting the minimum width of an element
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.min-w-0</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">min-width: 0;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's minimum width to <code>0</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-w-full</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-width: 100%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum width to <code>100%</code>.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.min-w-0</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">min-width: 0;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's minimum width to <code>0</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-w-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-width: 100%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum width to <code>100%</code>.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
-
diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md
index e901277d5..780831ccc 100644
--- a/docs/source/docs/opacity.blade.md
+++ b/docs/source/docs/opacity.blade.md
@@ -1,67 +1,60 @@
 ---
 extends: _layouts.documentation
 title: "Opacity"
+description: "Utilities for controlling the opacity of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Opacity
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the opacity of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.opacity-100</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">opacity: 1;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the opacity of an element to 100%.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-75</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: .75;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 75%.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-50</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: .5;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 50%.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-25</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: .25;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 25%.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-0</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: 0;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 0%.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.opacity-100</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">opacity: 1;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the opacity of an element to 100%.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-75</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: .75;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 75%.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-50</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: .5;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 50%.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-25</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: .25;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 25%.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-0</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 0%.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ## Example
 
 @component('_partials.code-sample')
 <div class="flex -mx-2">
-@foreach ($page->config['opacity']->reverse() as $name => $value)
+  @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>
-@endforeach
+  @endforeach
 </div>
 @slot('code')
 @foreach ($page->config['opacity']->reverse() as $name => $value)
@@ -79,32 +72,32 @@ 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-smoke 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-smoke 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-smoke 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-smoke 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-smoke opacity-0 w-24 h-24 rounded-full inline-block"></div>
 </div>
 @endslot
 @slot('code')
 <div class="none:opacity-100 sm:opacity-75 md:opacity-50 lg:opacity-25 xl:opacity-0 ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md
index ead2182d7..58506d338 100644
--- a/docs/source/docs/overflow.blade.md
+++ b/docs/source/docs/overflow.blade.md
@@ -1,73 +1,66 @@
 ---
 extends: _layouts.documentation
 title: "Overflow"
+description: "Utilities for controlling how an element handles content that is too large for the container."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Overflow
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling how an element handles content that is too large for the container.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left overflow-x-scroll block" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-visible</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: visible;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Don't clip content that overflows the element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-auto</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: auto;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add scrollbars to an element if needed.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-hidden</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: hidden;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Clip any content that overflows the element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-x-scroll</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow-x: auto;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow horizontal scrolling if needed.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-y-scroll</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow-y: auto;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow vertical scrolling if needed.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-scroll</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: scroll;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add scrollbars to an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.scrolling-touch</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">-webkit-overflow-scrolling: touch;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Use momentum-based scrolling on touch devices.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.scrolling-auto</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">-webkit-overflow-scrolling: auto;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Use "regular" scrolling on touch devices.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-visible</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: visible;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Don't clip content that overflows the element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-auto</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: auto;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add scrollbars to an element if needed.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-hidden</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: hidden;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Clip any content that overflows the element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-x-scroll</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow-x: auto;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow horizontal scrolling if needed.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-y-scroll</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow-y: auto;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow vertical scrolling if needed.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-scroll</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: scroll;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add scrollbars to an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.scrolling-touch</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">-webkit-overflow-scrolling: touch;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Use momentum-based scrolling on touch devices.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.scrolling-auto</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">-webkit-overflow-scrolling: auto;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Use "regular" scrolling on touch devices.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Visible <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
@@ -76,9 +69,9 @@ Use `.overflow-visible` to prevent content within an element from being clipped.
 
 @component('_partials.code-sample')
 <div class="overflow-hidden h-24">
-    <div class="overflow-visible h-32 bg-smoke text-slate 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 class="overflow-visible h-32 bg-smoke text-slate 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>
 @slot('code')
 <div class="overflow-visible h-32 ...">Lorem ipsum dolor sit amet...</div>
@@ -91,7 +84,7 @@ Use `.overflow-auto` to add scrollbars to an element in the event that its conte
 
 @component('_partials.code-sample')
 <div class="overflow-scroll h-32 bg-smoke text-slate 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.
+  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')
 <div class="overflow-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>
@@ -104,7 +97,7 @@ Use `.overflow-hidden` to clip any content within an element that overflows the
 
 @component('_partials.code-sample')
 <div class="overflow-hidden h-32 bg-smoke text-slate 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.
+  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')
 <div class="overflow-hidden h-32 ...">Lorem ipsum dolor sit amet...</div>
@@ -117,7 +110,7 @@ Use `.overflow-x-scroll` to allow horizontal scrolling if needed.
 
 @component('_partials.code-sample')
 <div class="overflow-scroll bg-smoke text-slate p-2">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
+  QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
 </div>
 
 @slot('code')
@@ -125,14 +118,13 @@ Use `.overflow-x-scroll` to allow horizontal scrolling if needed.
 @endslot
 @endcomponent
 
-
 ### Scroll vertically
 
 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">
-    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.
+  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')
@@ -147,17 +139,17 @@ Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`,
 @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">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
+  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">
-    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.
+  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">
-    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!
+  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')
 <div class="overflow-scroll ...">QrLmmW69vMQD...</div>
@@ -172,7 +164,7 @@ Use `.scrolling-touch` to use momentum-based scrolling (where supported) on touc
 
 @component('_partials.code-sample')
 <div class="scrolling-touch overflow-auto h-32 bg-smoke text-slate 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.
+  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')
 <div class="scrolling-touch overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>
@@ -185,7 +177,7 @@ 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">
-    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.
+  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')
 <div class="scrolling-auto overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>
@@ -201,38 +193,38 @@ 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">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
+  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.
+  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">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
+  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>
+  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">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
+  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>
+  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">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
+  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>
+  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">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
+  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>
+  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('code')
 <div class="none:overflow-auto sm:overflow-visible md:overflow-hidden lg:overflow-x-scroll xl:overflow-y-scroll ...">
-    Lorem ipsum dolor sit amet...
+  Lorem ipsum dolor sit amet...
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md
index ea87a0bd9..7964d5f6e 100644
--- a/docs/source/docs/pointer-events.blade.md
+++ b/docs/source/docs/pointer-events.blade.md
@@ -1,48 +1,41 @@
 ---
 extends: _layouts.documentation
 title: "Pointer Events"
+description: "Utilities for controlling whether an element responds to pointer events."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Pointer Events
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling whether an element responds to pointer events.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/4">
-            <col class="w-1/4">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.pointer-events-none</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">pointer-events: none;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make element not react to pointer events, like <code>:hover</code> or <code>click</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.pointer-events-auto</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">pointer-events: auto;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make element react to pointer events, like <code>:hover</code> or <code>click</code>.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/4">
+      <col class="w-1/4">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.pointer-events-none</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">pointer-events: none;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make element not react to pointer events, like <code>:hover</code> or <code>click</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.pointer-events-auto</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">pointer-events: auto;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make element react to pointer events, like <code>:hover</code> or <code>click</code>.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md
index cc0d2cf9a..d8784c09f 100644
--- a/docs/source/docs/positioning.blade.md
+++ b/docs/source/docs/positioning.blade.md
@@ -1,101 +1,94 @@
 ---
 extends: _layouts.documentation
 title: "Positioning"
+descriptioj: "Utilities for controlling how an element is positioned in the DOM."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Positioning
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling how an element is positioned in the DOM.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="w-3/5 text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.static</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">position: static;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.fixed</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: fixed;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element relative to the browser window.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.absolute</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: absolute;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.relative</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: relative;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-t</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">top: 0;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the top edge of the nearest positioned parent.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-r</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">right: 0;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the right edge of the nearest positioned parent.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-b</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">bottom: 0;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-l</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">left: 0;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the left edge of the nearest positioned parent.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-y</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    top: 0;<br>
-                    bottom: 0;
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-x</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    right: 0;<br>
-                    left: 0;
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    top: 0;<br>
-                    right: 0;<br>
-                    bottom: 0;<br>
-                    left: 0;<br>
-                    width: 100%;<br>
-                    height: 100%;
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to all the edges of the nearest positioned parent.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="w-3/5 text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.static</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">position: static;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.fixed</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: fixed;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element relative to the browser window.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.absolute</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: absolute;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.relative</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: relative;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-t</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">top: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the top edge of the nearest positioned parent.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-r</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">right: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the right edge of the nearest positioned parent.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-b</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">bottom: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-l</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">left: 0;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the left edge of the nearest positioned parent.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-y</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          top: 0;<br>
+          bottom: 0;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-x</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          right: 0;<br>
+          left: 0;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          top: 0;<br>
+          right: 0;<br>
+          bottom: 0;<br>
+          left: 0;<br>
+          width: 100%;<br>
+          height: 100%;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to all the edges of the nearest positioned parent.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ### Static <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
@@ -230,21 +223,13 @@ Offsets are calculated relative to the viewport and the element *will* act as a
     </div>
     <div class="absolute pin overflow-auto pt-16 px-4 pb-4">
       <p class="mb-4">Scroll me!</p>
-
       <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
-
       <p class="mb-4">Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
-
       <p class="mb-4">Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>
-
       <p class="mb-4">Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
-
       <p class="mb-4">Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. </p>
-
       <p class="mb-4">Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. </p>
-
       <p class="mb-4">Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
-
       <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>
     </div>
   </div>
@@ -273,20 +258,20 @@ Use the `.pin{-edge?}` utilities to anchor absolutely positioned elements agains
 Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably find that these are all you need to precisely control absolutely positioned elements.
 
 <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><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><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><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Top and Bottom</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Left and Right</div>
-    </div>
+  <div class="pr-12">
+    <div class="mb-3 text-slate 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><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><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Top and Bottom</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Left and Right</div>
+  </div>
 </div>
 
 @component('_partials.code-sample')
diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md
index 7a1fcc666..4cb887994 100644
--- a/docs/source/docs/resize.blade.md
+++ b/docs/source/docs/resize.blade.md
@@ -1,53 +1,46 @@
 ---
 extends: _layouts.documentation
 title: "Resize"
+description: "Utilities for controlling the how a textarea can be resized."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Resize
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the how a textarea can be resized.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.resize-none</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">resize: none;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make a textarea not resizable.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.resize-y</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">resize: vertical;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make a textarea resizable vertically.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.resize-x</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">resize: horizontal;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make a textarea resizable horizontally.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.resize-none</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">resize: none;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make a textarea not resizable.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.resize-y</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">resize: vertical;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make a textarea resizable vertically.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.resize-x</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">resize: horizontal;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make a textarea resizable horizontally.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/responsive-design.blade.md b/docs/source/docs/responsive-design.blade.md
index a3b5806a7..db2258d36 100644
--- a/docs/source/docs/responsive-design.blade.md
+++ b/docs/source/docs/responsive-design.blade.md
@@ -1,10 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Responsive Design"
+description: null
 ---
 
-# Responsive Design
-
 Tailwind allows you to build responsive designs in the same way you build the rest of your design &mdash; using utility classes. Every utility in Tailwind is also available in screen-size specific variations. For example, the `.font-bold` utility can be used on small screen sizes using the `.sm:font-bold` class, on medium screen sizes using the `.md:font-bold` class, on large screen sizes using the `.lg:font-bold` class and on extra large screen sizes using the `.xl:font-bold` class.
 
 This is done using predefined screen sizes (media query breakpoints), each of which are given a unique name like `sm`, `md`, `lg` and `xl`. By default Tailwind takes a "mobile first" approach, where each screen size represents a minimum viewport width. Any classes you apply at smaller screen sizes are also applied to larger sizes, unless of course you override them, which is the whole point! This approach, while simple, is actually very powerful and can be used to build complex, beautiful, responsive designs.
@@ -14,32 +13,32 @@ This is done using predefined screen sizes (media query breakpoints), each of wh
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="flex justify-center">
-    <div class="bg-purple text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-purple text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('sm')
 <div class="flex justify-center">
-    <div class="bg-green text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-green text-white w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('md')
 <div class="flex justify-center">
-    <div class="bg-blue text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-blue text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('lg')
 <div class="flex justify-center">
-    <div class="bg-red text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-red text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('xl')
 <div class="flex justify-center">
-    <div class="bg-orange text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
+  <div class="bg-orange text-yellow w-24 h-24 rounded-full text-xs font-semibold flex items-center justify-center">Tailwind</div>
 </div>
 @endslot
 @slot('code')
 <div class="none:bg-purple none:text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
-    ...
+  ...
 </div>
 @endslot
 @endcomponent
@@ -101,7 +100,6 @@ These screen names will be reflected in your utilities, so your `.bg-red` utilit
 }
 ```
 
-
 ## Advanced screens
 
 Tailwind also allows for more complex screen definitions, which can be useful in certain situations. For example, if you wanted to define both the minimum and maximum size for your screens, you could do that like this:
diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md
index 4507b6dfc..e5a492c83 100644
--- a/docs/source/docs/shadows.blade.md
+++ b/docs/source/docs/shadows.blade.md
@@ -1,63 +1,56 @@
 ---
 extends: _layouts.documentation
 title: "Shadows"
+description: "Utilities for controlling the box shadow of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Shadows
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the box shadow of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/4">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.shadow</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 2px 4px 0 rgba(0,0,0,0.10)</span>;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a small box shadow to an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-md</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 4px 8px 0 rgba(0,0,0,0.12),</span> <span class="whitespace-no-wrap">0 2px 4px 0 rgba(0,0,0,0.08);</span></td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium box shadow to an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-lg</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 15px 30px 0 rgba(0,0,0,0.11),</span> <span class="whitespace-no-wrap">0 5px 15px 0 rgba(0,0,0,0.08);</span></td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large box shadow to an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-inner</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">inset 0 2px 4px 0 rgba(0,0,0,0.06);</span></td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small inner box shadow to an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-none</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: none;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove a box shadow from an element.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/4">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.shadow</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 2px 4px 0 rgba(0,0,0,0.10)</span>;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a small box shadow to an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-md</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 4px 8px 0 rgba(0,0,0,0.12),</span> <span class="whitespace-no-wrap">0 2px 4px 0 rgba(0,0,0,0.08);</span></td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium box shadow to an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 15px 30px 0 rgba(0,0,0,0.11),</span> <span class="whitespace-no-wrap">0 5px 15px 0 rgba(0,0,0,0.08);</span></td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large box shadow to an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-inner</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">inset 0 2px 4px 0 rgba(0,0,0,0.06);</span></td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small inner box shadow to an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-none</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: none;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove a box shadow from an element.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ## Outer shadow
@@ -110,32 +103,32 @@ 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-smoke-lighter 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-smoke-lighter 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-smoke-lighter 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-smoke-lighter 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-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
 </div>
 @endslot
 @slot('code')
 <div class="none:shadow sm:shadow-md md:shadow-lg lg:shadow-inner xl:shadow-none ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md
index 2b8ad9f2d..57029cad5 100644
--- a/docs/source/docs/spacing.blade.md
+++ b/docs/source/docs/spacing.blade.md
@@ -1,21 +1,14 @@
 ---
 extends: _layouts.documentation
 title: "Spacing"
+description: "Utilities for controlling an element's padding and margin."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Spacing
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling an element's padding and margin.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 Control an element's padding and margin using the `.p{side?}-{size}`, `.m{side?}-{size}`, and `.-m{side?}-{size}` utilities.
@@ -23,32 +16,32 @@ Control an element's padding and margin using the `.p{side?}-{size}`, `.m{side?}
 For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.mx-0` would make the horizontal margin zero, and `.-mb-6` would add a `1.5rem`negative margin to the bottom of an element.
 
 <div class="flex items-start mt-8 text-sm">
-    <div class="pr-12">
-        <div class="mb-3 text-slate 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><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><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
-        <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><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>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
-        <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>
+  <div class="pr-12">
+    <div class="mb-3 text-slate 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><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><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
+    <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><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>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
+    <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>
 </div>
diff --git a/docs/source/docs/svg.blade.md b/docs/source/docs/svg.blade.md
index e2e70261c..4b0d66bd6 100644
--- a/docs/source/docs/svg.blade.md
+++ b/docs/source/docs/svg.blade.md
@@ -1,22 +1,15 @@
 ---
 extends: _layouts.documentation
 title: "SVG"
+description: "Utilities for styling SVG elements."
 ---
 
-# SVG
-
-<div class="text-xl text-slate-light mb-4">
-    Useful utilities for styling SVG elements.
-</div>
-
-<div class="mb-8">
-    @include('_partials.work-in-progress')
-</div>
+@include('_partials.work-in-progress')
 
 Tailwind doesn't provide SVG-specific utilites. Instead, use the generic sizing utilites to control an SVG's width and height, and the text color utilities to control an SVG's fill color.
 
 @component('_partials.code-sample', ['class' => 'text-center'])
 <svg class="inline-block h-12 w-12 text-teal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-    <path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/>
+  <path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/>
 </svg>
 @endcomponent
diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md
index 12a4307d5..ea1af84a0 100644
--- a/docs/source/docs/text-alignment.blade.md
+++ b/docs/source/docs/text-alignment.blade.md
@@ -1,58 +1,51 @@
 ---
 extends: _layouts.documentation
 title: "Text Alignment"
+description: "Utilities for controlling the alignment of text."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Text Alignment
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the alignment of text.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-left</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: left;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the left.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-center</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: center;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the center.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-right</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: right;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the right.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-justify</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: justify;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Justify text.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-left</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: left;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the left.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-center</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: center;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the center.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-right</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: right;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the right.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-justify</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: justify;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Justify text.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md
index 51c3ca5e1..2be6db5d8 100644
--- a/docs/source/docs/text-color.blade.md
+++ b/docs/source/docs/text-color.blade.md
@@ -1,42 +1,35 @@
 ---
 extends: _layouts.documentation
 title: "Text Color"
+description: "Utilities for controlling the text color of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: true
+  focus: false
 ---
 
-# Text Color
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the text color of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => true,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            @foreach ($page->config['colors'] as $name => $value)
-                <tr>
-                    <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">.text-{{ $name }}</td>
-                    <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-no-wrap">color: {{ $value }};</td>
-                    <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the text color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
-                </tr>
-            @endforeach
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      @foreach ($page->config['colors'] as $name => $value)
+      <tr>
+        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">.text-{{ $name }}</td>
+        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-no-wrap">color: {{ $value }};</td>
+        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the text color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
+      </tr>
+      @endforeach
+    </tbody>
+  </table>
 </div>
 
 ## Hover
@@ -45,7 +38,7 @@ In addition to the standard responsive variations, text colors also come in `hov
 
 @component('_partials.code-sample', ['class' => 'text-center'])
 <button class="text-blue-dark hover:text-red-dark border-2 border-blue hover:border-red bg-transparent py-2 px-4 font-semibold rounded">
-    Button
+  Button
 </button>
 @endcomponent
 
diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md
index b5ad7a111..c95931532 100644
--- a/docs/source/docs/text-sizing.blade.md
+++ b/docs/source/docs/text-sizing.blade.md
@@ -1,83 +1,76 @@
 ---
 extends: _layouts.documentation
 title: "Text Sizing"
+description: "Utilities for controlling the text size of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Text Sizing
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the text size of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-xs</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: .75rem;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>.75rem</code> (<code>12px</code>).</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-sm</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: .875rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>.875rem</code> (<code>14px</code>).</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-base</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1rem</code> (<code>16px</code>).</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-lg</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.125rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.125rem</code> (<code>18px</code>).</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-xl</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.25rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.25rem</code> (<code>20px</code>).</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-2xl</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.5rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.5rem</code> (<code>24px</code>).</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-3xl</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.875rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.875rem</code> (<code>30px</code>).</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-4xl</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 2.25rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>2.25rem</code> (<code>36px</code>).</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-5xl</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 3rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>3rem</code> (<code>48px</code>).</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-xs</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: .75rem;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>.75rem</code> (<code>12px</code>).</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-sm</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: .875rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>.875rem</code> (<code>14px</code>).</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-base</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1rem</code> (<code>16px</code>).</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-lg</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.125rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.125rem</code> (<code>18px</code>).</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-xl</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.25rem</code> (<code>20px</code>).</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-2xl</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.5rem</code> (<code>24px</code>).</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-3xl</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.875rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.875rem</code> (<code>30px</code>).</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-4xl</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 2.25rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>2.25rem</code> (<code>36px</code>).</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-5xl</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 3rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>3rem</code> (<code>48px</code>).</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md
index ce748c9c5..7106b6422 100644
--- a/docs/source/docs/text-style.blade.md
+++ b/docs/source/docs/text-style.blade.md
@@ -1,101 +1,94 @@
 ---
 extends: _layouts.documentation
-title: "Style & Decoration"
+title: "Style &amp; Decoration"
+description: "Utilities for controlling the style of text."
+features:
+  responsive: true
+  customizable: true
+  hover: true
+  focus: false
 ---
 
-# Text Style & Decoration
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the style of text.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => true,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-2/5">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.italic</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-style: italic;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Italicizes the text within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.roman</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-style: normal;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Sets the text to roman (disables italics) within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.uppercase</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: uppercase;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Makes all text uppercase within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.lowercase</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: lowercase;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Makes all text lowercase within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.capitalize</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: capitalize;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Capitalizes the text within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.normal-case</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: none;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables any text transformations previously applied to an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.underline</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: underline;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Underlines the text within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.line-through</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: line-through;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Adds a line through the text within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.no-underline</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: none;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables any text decorations previously applied to an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.antialiased</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    -webkit-font-smoothing: antialiased;<br>
-                    -moz-osx-font-smoothing: grayscale;
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font smoothing of an element to antialiased.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.subpixel-antialiased</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    -webkit-font-smoothing: auto;<br>
-                    -moz-osx-font-smoothing: auto;
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font smoothing of an element to subpixel antialiasing (the default).</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-2/5">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.italic</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-style: italic;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Italicizes the text within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.roman</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-style: normal;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Sets the text to roman (disables italics) within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.uppercase</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: uppercase;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Makes all text uppercase within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.lowercase</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: lowercase;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Makes all text lowercase within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.capitalize</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: capitalize;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Capitalizes the text within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.normal-case</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: none;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables any text transformations previously applied to an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.underline</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: underline;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Underlines the text within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.line-through</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: line-through;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Adds a line through the text within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.no-underline</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: none;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables any text decorations previously applied to an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.antialiased</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          -webkit-font-smoothing: antialiased;<br>
+          -moz-osx-font-smoothing: grayscale;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font smoothing of an element to antialiased.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.subpixel-antialiased</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          -webkit-font-smoothing: auto;<br>
+          -moz-osx-font-smoothing: auto;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font smoothing of an element to subpixel antialiasing (the default).</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ## Hover
diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md
index 526286189..545048e07 100644
--- a/docs/source/docs/user-select.blade.md
+++ b/docs/source/docs/user-select.blade.md
@@ -1,48 +1,41 @@
 ---
 extends: _layouts.documentation
 title: "User Select"
+description: "Utilities for controlling whether the user can select text in an element."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# User Select
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling whether the user can select text in an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.select-none</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">user-select: none;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Disable selecting text in an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.select-text</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">user-select: text;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Allow selecting text in an element.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.select-none</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">user-select: none;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Disable selecting text in an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.select-text</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">user-select: text;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Allow selecting text in an element.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md
index 5789d0cd1..b211c1285 100644
--- a/docs/source/docs/vertical-alignment.blade.md
+++ b/docs/source/docs/vertical-alignment.blade.md
@@ -1,36 +1,29 @@
 ---
 extends: _layouts.documentation
 title: "Vertical Alignment"
+description: "Utilities for controlling the vertical alignment of an inline or table-cell box."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Vertical Alignment
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the vertical alignment of an inline or table-cell box.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
+    <table class="w-full text-left table-collapse">
         <colgroup>
             <col class="w-1/5">
             <col class="w-1/3">
             <col>
         </colgroup>
         <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
+            <tr>
+                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+            </tr>
         </thead>
         <tbody class="align-baseline">
             <tr>
diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md
index 35e6c39ee..ffa2180ce 100644
--- a/docs/source/docs/visibility.blade.md
+++ b/docs/source/docs/visibility.blade.md
@@ -1,52 +1,43 @@
 ---
 extends: _layouts.documentation
 title: "Visibility"
+description: "Utilities for controlling the visible of an element."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-# Visibility
-
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the visible of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/4">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.visible</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">visibility: visible;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make an element visible.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.invisible</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">visibility: hidden;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Hide an element without affecting the layout of the document.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/4">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.visible</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">visibility: visible;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Make an element visible.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.invisible</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">visibility: hidden;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Hide an element without affecting the layout of the document.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
-
 ### Visible <span class="ml-2 font-semibold text-slate-light 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.
@@ -63,7 +54,6 @@ Use `.invisible` to hide an element, but still maintain its space.
 <div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
 @endcomponent
 
-
 ## Responsive
 
 To apply an overflow utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:overflow-scroll` to an element would apply the `overflow-scroll` utility at medium screen sizes and above.
@@ -73,27 +63,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-smoke 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-smoke 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-smoke 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-smoke 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-smoke 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 45bd45c28..97b582be6 100644
--- a/docs/source/docs/what-is-tailwind.blade.md
+++ b/docs/source/docs/what-is-tailwind.blade.md
@@ -1,14 +1,13 @@
 ---
 extends: _layouts.documentation
 title: "What is Tailwind?"
+description: null
 ---
 
-# What is Tailwind?
-
 <div class="mt-8 text-2xl text-grey-dark mb-8">
-    <p class="leading-tight">
-        Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
-    </p>
+  <p class="leading-tight">
+    Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
+  </p>
 </div>
 
 Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that **it's not a UI kit.**
@@ -31,33 +30,33 @@ Here's an example of a contact card component built with Tailwind without writin
 
 @component('_partials.code-sample', ['class' => 'bg-grey-lighter py-8'])
 <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
-    <div class="sm:flex sm:items-center px-6 py-4">
-        <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
-        <div class="text-center sm:text-left sm:flex-grow">
-            <div class="mb-4">
-                <p class="text-xl leading-tight">Adam Wathan</p>
-                <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
-            </div>
-            <div>
-                <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
-            </div>
-        </div>
+  <div class="sm:flex sm:items-center px-6 py-4">
+    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
+    <div class="text-center sm:text-left sm:flex-grow">
+      <div class="mb-4">
+        <p class="text-xl leading-tight">Adam Wathan</p>
+        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
+      </div>
+      <div>
+        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
+      </div>
     </div>
+  </div>
 </div>
 @slot('code')
 <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
-    <div class="sm:flex sm:items-center px-6 py-4">
-        <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
-        <div class="text-center sm:text-left sm:flex-grow">
-            <div class="mb-4">
-                <p class="text-xl leading-tight">Adam Wathan</p>
-                <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
-            </div>
-            <div>
-                <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
-            </div>
-        </div>
+  <div class="sm:flex sm:items-center px-6 py-4">
+    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
+    <div class="text-center sm:text-left sm:flex-grow">
+      <div class="mb-4">
+        <p class="text-xl leading-tight">Adam Wathan</p>
+        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
+      </div>
+      <div>
+        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
+      </div>
     </div>
+  </div>
 </div>
 @endslot
 @endcomponent
@@ -70,18 +69,18 @@ Tailwind provides tools for [extracting component classes](/docs/extracting-comp
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
-    Button
+  Button
 </button>
 
 @slot('code')
 <!-- Using utilities: -->
 <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
-    Button
+  Button
 </button>
 
 <!-- Extracting component classes: -->
 <button class="btn btn-blue">
-    Button
+  Button
 </button>
 
 <style>
@@ -107,47 +106,46 @@ 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="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>
 @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="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>
 @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="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>
 @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="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>
 @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="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>
 @endslot
 @slot('code')
 <div class="none:justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around ...">
-    <!-- ... -->
+  <!-- ... -->
 </div>
 @endslot
 @endcomponent
 
-
 ### Designed to be customized
 
 If it makes sense to be customizable, Tailwind lets you customize it.
@@ -165,7 +163,6 @@ const colorPalette = {
   // ...
 }
 
-
 module.exports = {
   // ...
   backgroundColors: colorPalette,
diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md
index f6ffa8c35..d66a88532 100644
--- a/docs/source/docs/whitespace-and-wrapping.blade.md
+++ b/docs/source/docs/whitespace-and-wrapping.blade.md
@@ -1,82 +1,75 @@
 ---
 extends: _layouts.documentation
-title: "Whitespace & Wrapping"
+title: "Whitespace &amp; Wrapping"
+description: "Utilities for controlling the whitespace and wrapping of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Whitespace & Wrapping
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the whitespace and wrapping of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/4">
-            <col class="w-1/4">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.whitespace-normal</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">white-space: normal;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Cause text to wrap normally within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-no-wrap</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: nowrap;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent text from wrapping within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve line returns and spaces within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre-line</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre-line;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve line returns but not spaces within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre-wrap</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre-wrap;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve spaces but not line returns within an element.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.break-words</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">word-wrap: break-word;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add line breaks mid-word if needed.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.break-normal</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">word-wrap: normal;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only add line breaks at normal word break points.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.truncate</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
-                    overflow: hidden;<br>
-                    text-overflow: ellipsis;<br>
-                    white-space: nowrap;<br>
-                </td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Truncate overflowing text with an ellipsis (<code>…</code>) if needed.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/4">
+      <col class="w-1/4">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.whitespace-normal</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">white-space: normal;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Cause text to wrap normally within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-no-wrap</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: nowrap;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent text from wrapping within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve line returns and spaces within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre-line</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre-line;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve line returns but not spaces within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre-wrap</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre-wrap;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve spaces but not line returns within an element.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.break-words</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">word-wrap: break-word;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add line breaks mid-word if needed.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.break-normal</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">word-wrap: normal;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only add line breaks at normal word break points.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.truncate</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
+          overflow: hidden;<br>
+          text-overflow: ellipsis;<br>
+          white-space: nowrap;
+        </td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Truncate overflowing text with an ellipsis (<code>…</code>) if needed.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md
index 6a1c1abd7..440ab7cc4 100644
--- a/docs/source/docs/width.blade.md
+++ b/docs/source/docs/width.blade.md
@@ -1,178 +1,171 @@
 ---
 extends: _layouts.documentation
 title: "Width"
+description: "Utilities for setting the width of an element"
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Width
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for setting the width of an element
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-          <tr>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-              <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-          </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.w-1</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">width: 0.25rem;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's width to <code>0.25rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-2</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 0.5rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>0.5rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-3</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 0.75rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>0.75rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-4</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 1rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>1rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-6</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 1.5rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>1.5rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-8</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 2rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>2rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-10</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 2.5rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>2.5rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-12</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 3rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>3rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-16</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 4rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>4rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-24</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 6rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>6rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-32</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 8rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>8rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-48</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 12rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>12rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-64</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 16rem;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>16rem</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-auto</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: auto;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>auto</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-px</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 1px;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>1px</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/2</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 50%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>50%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/3</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 33.33333%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>33.33333%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-2/3</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 66.66667%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>66.66667%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/4</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 25%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>25%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-3/4</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 75%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>75%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/5</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 20%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>20%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-2/5</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 40%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>40%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-3/5</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 60%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>60%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-4/5</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 80%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>80%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/6</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 16.66667%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>16.66667%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-5/6</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 83.33333%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>83.33333%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-full</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 100%;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>100%</code>.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-screen</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 100vw;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>100vw</code>.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.w-1</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">width: 0.25rem;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's width to <code>0.25rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-2</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 0.5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>0.5rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-3</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 0.75rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>0.75rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-4</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 1rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>1rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-6</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 1.5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>1.5rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-8</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 2rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>2rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-10</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 2.5rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>2.5rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-12</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 3rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>3rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-16</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 4rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>4rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-24</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 6rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>6rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-32</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 8rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>8rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-48</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 12rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>12rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-64</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 16rem;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>16rem</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-auto</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: auto;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>auto</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-px</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 1px;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>1px</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/2</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 50%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>50%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/3</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 33.33333%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>33.33333%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-2/3</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 66.66667%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>66.66667%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/4</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 25%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>25%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-3/4</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 75%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>75%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/5</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 20%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>20%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-2/5</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 40%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>40%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-3/5</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 60%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>60%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-4/5</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 80%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>80%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/6</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 16.66667%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>16.66667%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-5/6</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 83.33333%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>83.33333%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-full</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 100%;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>100%</code>.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-screen</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 100vw;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>100vw</code>.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/docs/source/docs/working-utility-first.blade.md b/docs/source/docs/working-utility-first.blade.md
deleted file mode 100644
index 1e9a6ed1c..000000000
--- a/docs/source/docs/working-utility-first.blade.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.documentation
-title: "Working Utility-First"
----
-
-# Working Utility-First
diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md
index 3a28f90ca..d30ef2b45 100644
--- a/docs/source/docs/z-index.blade.md
+++ b/docs/source/docs/z-index.blade.md
@@ -1,73 +1,66 @@
 ---
 extends: _layouts.documentation
 title: "Z-Index"
+description: "Utilities for controlling the stack order of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-# Z-Index
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the stack order of an element.
-</div>
-
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
-    <table class="w-full text-left" style="border-collapse: collapse;">
-        <colgroup>
-            <col class="w-1/5">
-            <col class="w-1/3">
-            <col>
-        </colgroup>
-        <thead>
-            <tr>
-                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-                <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-            </tr>
-        </thead>
-        <tbody class="align-baseline">
-            <tr>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.z-0</td>
-                <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">z-index: 0;</td>
-                <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the z-index of the element to 0.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-10</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 10;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 10.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-20</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 20;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 20.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-30</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 30;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 30.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-40</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 40;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 40.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-50</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 50;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 50.</td>
-            </tr>
-            <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-auto</td>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: auto;</td>
-                <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Don't create a new stacking context.</td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="w-full text-left table-collapse">
+    <colgroup>
+      <col class="w-1/5">
+      <col class="w-1/3">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+      </tr>
+    </thead>
+    <tbody class="align-baseline">
+      <tr>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.z-0</td>
+        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">z-index: 0;</td>
+        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the z-index of the element to 0.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-10</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 10;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 10.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-20</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 20;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 20.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-30</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 30;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 30.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-40</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 40;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 40.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-50</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 50;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 50.</td>
+      </tr>
+      <tr>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-auto</td>
+        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: auto;</td>
+        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Don't create a new stacking context.</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 
 ## Usage
@@ -76,11 +69,11 @@ Control the stack order (or three-dimensional positioning) of an element in Tail
 
 @component('_partials.code-sample')
 <div class="relative h-32 text-center">
-    <div class="z-40 absolute w-24 h-24 ml-0 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
-    <div class="z-30 absolute w-24 h-24 ml-2 mt-2 bg-grey flex justify-center items-center">z-30</div>
-    <div class="z-20 absolute w-24 h-24 ml-4 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
-    <div class="z-10 absolute w-24 h-24 ml-6 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
-    <div class="z-0 absolute w-24 h-24 ml-8 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
+  <div class="z-40 absolute w-24 h-24 ml-0 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
+  <div class="z-30 absolute w-24 h-24 ml-2 mt-2 bg-grey flex justify-center items-center">z-30</div>
+  <div class="z-20 absolute w-24 h-24 ml-4 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
+  <div class="z-10 absolute w-24 h-24 ml-6 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
+  <div class="z-0 absolute w-24 h-24 ml-8 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
 </div>
 @slot('code')
 <div class="z-40 ml-0 mt-0 bg-grey-light">z-40</div>
@@ -100,52 +93,52 @@ For more information about Tailwind's responsive design features, check out the
 @component('_partials.responsive-code-sample')
 @slot('none')
 <div class="relative w-full h-32 text-center">
-    <div class="z-0 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
-    <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
-    <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
-    <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
-    <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
-    <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
+  <div class="z-0 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
+  <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
+  <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
+  <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
+  <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
+  <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
 </div>
 @endslot
 @slot('sm')
 <div class="relative h-32 text-center">
-    <div class="z-10 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
-    <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
-    <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
-    <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
-    <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
-    <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
+  <div class="z-10 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
+  <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
+  <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
+  <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
+  <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
+  <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
 </div>
 @endslot
 @slot('md')
 <div class="relative h-32 text-center">
-    <div class="z-20 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
-    <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
-    <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
-    <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
-    <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
-    <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
+  <div class="z-20 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
+  <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
+  <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
+  <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
+  <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
+  <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
 </div>
 @endslot
 @slot('lg')
 <div class="relative h-32 text-center">
-    <div class="z-30 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
-    <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
-    <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
-    <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
-    <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
-    <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
+  <div class="z-30 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
+  <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
+  <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
+  <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
+  <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
+  <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
 </div>
 @endslot
 @slot('xl')
 <div class="relative h-32 text-center">
-    <div class="z-40 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
-    <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
-    <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
-    <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
-    <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
-    <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
+  <div class="z-40 absolute w-full h-12 mt-12 bg-yellow-light flex justify-center items-center">yellow</div>
+  <div class="z-40 absolute w-24 h-24 ml-4 mt-0 bg-grey-light flex justify-center items-center">z-40</div>
+  <div class="z-30 absolute w-24 h-24 ml-6 mt-2 bg-grey flex justify-center items-center">z-30</div>
+  <div class="z-20 absolute w-24 h-24 ml-8 mt-4 bg-grey-dark flex justify-center items-center">z-20</div>
+  <div class="z-10 absolute w-24 h-24 ml-10 mt-6 bg-grey-darker flex justify-center items-center">z-10</div>
+  <div class="z-0 absolute w-24 h-24 ml-12 mt-8 bg-grey-darkest flex justify-center items-center">z-0</div>
 </div>
 @endslot
 @slot('code')
@@ -174,4 +167,4 @@ By default Tailwind provides six numeric `z-index` utilities and an `auto` utili
 + '75': 75,
 + '100': 100,
   'auto': 'auto',
-@endslot
+@endcomponent
diff --git a/docs/source/img/tailwind-square.png b/docs/source/img/tailwind-square.png
new file mode 100644
index 000000000..490ff81c4
Binary files /dev/null and b/docs/source/img/tailwind-square.png differ
diff --git a/docs/source/index.blade.php b/docs/source/index.blade.php
index 3cdb73656..ecd597535 100644
--- a/docs/source/index.blade.php
+++ b/docs/source/index.blade.php
@@ -12,79 +12,79 @@
 @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>
-            <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>
-                <h1 class="text-center font-semibold text-3xl tracking-tight mb-1">Tailwind <span class="tracking-tight">CSS</span></h1>
-                <p class="text-center">
-                <a class="text-lg text-grey hover:text-grey-dark font-semibold tracking-tight" href="https://github.com/tailwindcss/tailwindcss">v{{ $page->version }}</a>
-                </p>
-            </div>
-            <h2 class="mt-12 font-light text-3xl sm:text-4xl text-center">A Utility-First CSS Framework<br class="hidden sm:inline-block"> for Rapid UI Development</h2>
-            <div class="mt-12 sm:flex sm:justify-center">
-                <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs rounded-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal bg-tailwind-teal text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="/docs/what-is-tailwind">Get Started</a>
-                <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs rounded-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal text-tailwind-teal hover:text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="https://github.com/tailwindcss/tailwindcss">GitHub</a>
-            </div>
-        </div>
+  <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>
+      <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>
+        <h1 class="text-center font-semibold text-3xl tracking-tight mb-1">Tailwind <span class="tracking-tight">CSS</span></h1>
+        <p class="text-center">
+          <a href="https://github.com/tailwindcss/tailwindcss/releases" class="text-lg text-grey hover:text-grey-dark font-semibold tracking-tight">v{{ $page->version }}</a>
+        </p>
+      </div>
+      <h2 class="mt-12 font-light text-3xl sm:text-4xl text-center">A Utility-First CSS Framework<br class="hidden sm:inline-block"> for Rapid UI Development</h2>
+      <div class="mt-12 sm:flex sm:justify-center">
+        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs rounded-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal bg-tailwind-teal text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="/docs/what-is-tailwind">Get Started</a>
+        <a class="mt-6 sm:mt-0 mx-auto sm:mx-2 max-w-xs rounded-full text-center leading-none font-semibold block px-12 py-3 border-2 border-tailwind-teal text-tailwind-teal hover:text-white hover:border-tailwind-teal-light hover:bg-tailwind-teal-light hover:bg-tailwind-teal-light" href="https://github.com/tailwindcss/tailwindcss">GitHub</a>
+      </div>
     </div>
+  </div>
 </div>
 
 <div class="px-6">
-    <div class="my-12 text-center uppercase">
-        <span class="inline-block bg-soft px-4 text-grey-darker tracking-wide font-bold">A project by</span>
-    </div>
-    <div class="flex justify-center">
-        <div class="pb-4 flex justify-center flex-wrap max-w-md xl:max-w-full border-b-2 border-grey-light">
-            <div class="mb-8 w-64 md:flex-x-center">
-                <div class="flex items-center">
-                    <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/887661330832003072/Zp6rA_e2_400x400.jpg" alt="">
-                    <div class="pl-4">
-                        <a href="https://twitter.com/adamwathan" class="block hover:underline text-dark text-lg text-medium">Adam Wathan</a>
-                        <a href="https://twitter.com/adamwathan" class="block hover:underline text-tailwind-teal-dark text-sm">@adamwathan</a>
-                    </div>
-                </div>
-            </div>
-            <div class="mb-8 w-64 md:flex-x-center">
-                <div class="flex items-center">
-                    <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
-                    <div class="pl-4">
-                        <a href="https://twitter.com/reinink" class="block hover:underline text-dark text-lg text-medium">Jonathan Reinink</a>
-                        <a href="https://twitter.com/reinink" class="block hover:underline text-tailwind-teal-dark text-sm">@reinink</a>
-                    </div>
-                </div>
-            </div>
-            <div class="mb-8 w-64 md:flex-x-center">
-                <div class="flex items-center">
-                    <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/892478120829239296/U1KUwGJO_400x400.jpg">
-                    <div class="pl-4">
-                        <a href="https://twitter.com/davidhemphill" class="block hover:underline text-dark text-lg text-medium">David Hemphill</a>
-                        <a href="https://twitter.com/davidhemphill" class="block hover:underline text-tailwind-teal-dark text-sm">@davidhemphill</a>
-                    </div>
-                </div>
-            </div>
-            <div class="mb-8 w-64 md:flex-x-center">
-                <div class="flex items-center">
-                    <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/875010472105222144/Pkt9zqPY_400x400.jpg" alt="">
-                    <div class="pl-4">
-                        <a href="https://twitter.com/steveschoger" class="block hover:underline text-dark text-lg text-medium">Steve Schoger</a>
-                        <a href="https://twitter.com/steveschoger" class="block hover:underline text-tailwind-teal-dark text-sm">@steveschoger</a>
-                    </div>
-                </div>
-            </div>
+  <div class="my-12 text-center uppercase">
+    <span class="inline-block bg-soft px-4 text-grey-darker tracking-wide font-bold">A project by</span>
+  </div>
+  <div class="flex justify-center">
+    <div class="pb-4 flex justify-center flex-wrap max-w-md xl:max-w-full border-b-2 border-grey-light">
+      <div class="mb-8 w-64 md:flex-x-center">
+        <div class="flex items-center">
+          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/887661330832003072/Zp6rA_e2_400x400.jpg" alt="">
+          <div class="pl-4">
+            <a href="https://twitter.com/adamwathan" class="block hover:underline text-dark text-lg text-medium">Adam Wathan</a>
+            <a href="https://twitter.com/adamwathan" class="block hover:underline text-tailwind-teal-dark text-sm">@adamwathan</a>
+          </div>
         </div>
+      </div>
+      <div class="mb-8 w-64 md:flex-x-center">
+        <div class="flex items-center">
+          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
+          <div class="pl-4">
+            <a href="https://twitter.com/reinink" class="block hover:underline text-dark text-lg text-medium">Jonathan Reinink</a>
+            <a href="https://twitter.com/reinink" class="block hover:underline text-tailwind-teal-dark text-sm">@reinink</a>
+          </div>
+        </div>
+      </div>
+      <div class="mb-8 w-64 md:flex-x-center">
+        <div class="flex items-center">
+          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/892478120829239296/U1KUwGJO_400x400.jpg">
+          <div class="pl-4">
+            <a href="https://twitter.com/davidhemphill" class="block hover:underline text-dark text-lg text-medium">David Hemphill</a>
+            <a href="https://twitter.com/davidhemphill" class="block hover:underline text-tailwind-teal-dark text-sm">@davidhemphill</a>
+          </div>
+        </div>
+      </div>
+      <div class="mb-8 w-64 md:flex-x-center">
+        <div class="flex items-center">
+          <img class="h-16 w-16 rounded-full" src="https://pbs.twimg.com/profile_images/875010472105222144/Pkt9zqPY_400x400.jpg" alt="">
+          <div class="pl-4">
+            <a href="https://twitter.com/steveschoger" class="block hover:underline text-dark text-lg text-medium">Steve Schoger</a>
+            <a href="https://twitter.com/steveschoger" class="block hover:underline text-tailwind-teal-dark text-sm">@steveschoger</a>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 
-    <div class="mt-10 mb-16 mx-auto flex flex-wrap justify-center text-grey-darker">
-        <a class="block flex items-center hover:text-tailwind-teal" href="https://github.com/tailwindcss/tailwindcss">
-            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" 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>
-            <span class="ml-2">GitHub</span>
-        </a>
-        <a class="block ml-6 sm:ml-12 flex items-center hover:text-tailwind-teal" href="https://twitter.com/tailwindcss">
-            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"/></svg>
-            <span class="ml-2">Twitter</span>
-        </a>
-    </div>
+  <div class="mt-10 mb-16 mx-auto flex flex-wrap justify-center text-grey-darker">
+    <a class="block flex items-center hover:text-tailwind-teal" href="https://github.com/tailwindcss/tailwindcss">
+      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><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>
+      <span class="ml-2">GitHub</span>
+    </a>
+    <a class="block ml-6 sm:ml-12 flex items-center hover:text-tailwind-teal" href="https://twitter.com/tailwindcss">
+      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"/></svg>
+      <span class="ml-2">Twitter</span>
+    </a>
+  </div>
 </div>
 
 @endsection
diff --git a/docs/source/docs/safari-pinned-tab.svg b/docs/source/safari-pinned-tab.svg
similarity index 100%
rename from docs/source/docs/safari-pinned-tab.svg
rename to docs/source/safari-pinned-tab.svg
diff --git a/docs/tasks/bin.js b/docs/tasks/bin.js
deleted file mode 100644
index e6b1d4ca7..000000000
--- a/docs/tasks/bin.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var hasbin = require('hasbin');
-var fs = require('fs');
-
-module.exports = {
-    path: function() {
-        if (fs.existsSync('./vendor/bin/jigsaw')) {
-            return '"./vendor/bin/jigsaw"'
-        }
-
-        if (hasbin.sync('jigsaw')) {
-            return 'jigsaw';
-        }
-
-        console.log('Could not find Jigsaw; please install it via Composer, either locally or globally.');
-
-        process.exit();
-    }
-};
diff --git a/docs/webpack.mix.js b/docs/webpack.mix.js
index 8180a0313..752674c6e 100644
--- a/docs/webpack.mix.js
+++ b/docs/webpack.mix.js
@@ -13,7 +13,11 @@ const env = argv.e || argv.env || 'local'
 const plugins = [
     new OnBuild(() => {
         command.get('./vendor/bin/jigsaw build ' + env, (error, stdout, stderr) => {
-            console.log(error ? stderr : stdout)
+            if (error) {
+                console.log(stderr)
+                process.exit(1)
+            }
+            console.log(stdout)
         })
     }),
     new Watch({
diff --git a/package.json b/package.json
index 8ad351686..4e4257816 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -50,7 +50,9 @@
     "postcss-functions": "^3.0.0",
     "stylefmt": "^6.0.0"
   },
-  "browserslist": ["> 1%"],
+  "browserslist": [
+    "> 1%"
+  ],
   "babel": {
     "presets": [
       [
diff --git a/src/cli.js b/src/cli.js
index 60a488f9d..eb446ecea 100755
--- a/src/cli.js
+++ b/src/cli.js
@@ -8,19 +8,6 @@ import postcss from 'postcss'
 import process from 'process'
 import program from 'commander'
 
-function loadConfig(configPath) {
-  if (configPath === undefined) {
-    return undefined
-  }
-
-  if (!fs.existsSync(path.resolve(configPath))) {
-    console.error(`Config file [${configPath}] does not exist.`)
-    process.exit(1)
-  }
-
-  return require(path.resolve(configPath))
-}
-
 function writeStrategy(options) {
   if (options.output === undefined) {
     return output => {
@@ -46,7 +33,7 @@ function buildTailwind(inputFile, config, write) {
     .catch(error => console.log(error))
 }
 
-const packageJson = require(path.resolve(__dirname, '/../package.json'))
+const packageJson = require(path.resolve(__dirname, '../package.json'))
 
 program.version(packageJson.version).usage('<command> [<args>]')
 
@@ -65,8 +52,9 @@ program
       process.exit(1)
     }
 
-    const output = fs.readFileSync(path.resolve(__dirname, '/../defaultConfig.js'), 'utf8')
+    const output = fs.readFileSync(path.resolve(__dirname, '../defaultConfig.js'), 'utf8')
     fs.outputFileSync(destination, output.replace('// var defaultConfig', 'var defaultConfig'))
+    console.log(`Generated Tailwind config: ${destination}`)
     process.exit()
   })
 
@@ -83,7 +71,7 @@ program
       process.exit(1)
     }
 
-    buildTailwind(inputFile, loadConfig(options.config), writeStrategy(options)).then(() => {
+    buildTailwind(inputFile, options.config, writeStrategy(options)).then(() => {
       process.exit()
     })
   })
diff --git a/src/generators/cursor.js b/src/generators/cursor.js
index c33bf7310..cd0e8f385 100644
--- a/src/generators/cursor.js
+++ b/src/generators/cursor.js
@@ -3,6 +3,7 @@ import defineClasses from '../util/defineClasses'
 export default function() {
   return defineClasses({
     'cursor-auto': { cursor: 'auto' },
+    'cursor-default': { cursor: 'default' },
     'cursor-pointer': { cursor: 'pointer' },
     'cursor-not-allowed': { cursor: 'not-allowed' },
   })
diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js
index a7baf1729..52a51918f 100644
--- a/src/lib/substituteResponsiveAtRules.js
+++ b/src/lib/substituteResponsiveAtRules.js
@@ -6,11 +6,12 @@ import buildMediaQuery from '../util/buildMediaQuery'
 export default function(config) {
   return function(css) {
     const screens = config().screens
-    const rules = []
+    const responsiveRules = []
+    let finalRules = []
 
     css.walkAtRules('responsive', atRule => {
       const nodes = atRule.nodes
-      rules.push(...cloneNodes(nodes))
+      responsiveRules.push(...cloneNodes(nodes))
       atRule.before(nodes)
       atRule.remove()
     })
@@ -22,16 +23,34 @@ export default function(config) {
       })
 
       mediaQuery.append(
-        rules.map(rule => {
+        responsiveRules.map(rule => {
           const cloned = rule.clone()
           cloned.selectors = _.map(rule.selectors, selector => `.${screen}\\:${selector.slice(1)}`)
           return cloned
         })
       )
 
-      if (mediaQuery.nodes.length) {
-        css.append(mediaQuery)
+      finalRules.push(mediaQuery)
+    })
+
+    const hasScreenRules = finalRules.some(i => i.nodes.length !== 0)
+
+    if (!hasScreenRules) {
+      return
+    }
+
+    let includesScreensExplicitly = false
+
+    css.walkAtRules('tailwind', atRule => {
+      if (atRule.params === 'screens') {
+        atRule.replaceWith(finalRules)
+        includesScreensExplicitly = true
       }
     })
+
+    if (!includesScreensExplicitly) {
+      css.append(finalRules)
+      return
+    }
   }
 }