From 3c31e2a773d48191fc876e6565fd29db427f301a Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 9 Oct 2017 16:25:15 -0400
Subject: [PATCH] Scaffold out a bunch of docs pages

---
 docs/config.php                               |   5 +-
 docs/source/_layouts/master.blade.php         | 126 +++++++--
 docs/source/colors.md                         |   6 -
 docs/source/constrain.md                      |  71 -----
 docs/source/examples.blade.php                |  10 +-
 docs/source/flexbox.md                        |   6 -
 docs/source/images.md                         |   6 -
 docs/source/overflow.md                       |  50 ----
 docs/source/text.md                           | 243 ------------------
 docs/source/utilities/alignment.md            |  13 +
 docs/source/utilities/appearance.md           |  13 +
 docs/source/{ => utilities}/backgrounds.md    |   0
 docs/source/utilities/backgrounds/color.md    | 234 +++++++++++++++++
 docs/source/utilities/backgrounds/position.md |  13 +
 docs/source/utilities/backgrounds/size.md     |  13 +
 docs/source/{ => utilities}/borders.md        |   0
 docs/source/utilities/borders/base.md         |  77 ++++++
 docs/source/utilities/borders/color.md        |  56 ++++
 docs/source/utilities/borders/radius.md       |  13 +
 docs/source/utilities/borders/style.md        |  13 +
 docs/source/utilities/container.md            |  13 +
 docs/source/{ => utilities}/display.md        |  22 +-
 docs/source/utilities/flexbox.md              |  12 +
 docs/source/utilities/floats.md               |  12 +
 docs/source/utilities/interactivity/cursor.md |  12 +
 .../utilities/interactivity/pointer-events.md |  12 +
 docs/source/utilities/interactivity/resize.md |  12 +
 .../utilities/interactivity/user-select.md    |  12 +
 docs/source/utilities/opacity.md              |  12 +
 docs/source/utilities/overflow.md             |  12 +
 .../{position.md => utilities/positioning.md} |  10 +-
 docs/source/{ => utilities}/shadows.md        |   0
 docs/source/utilities/sizing/height.md        |  12 +
 docs/source/utilities/sizing/max-height.md    |  12 +
 docs/source/utilities/sizing/max-width.md     |  12 +
 docs/source/utilities/sizing/min-height.md    |  12 +
 docs/source/utilities/sizing/min-width.md     |  12 +
 docs/source/utilities/sizing/width.md         |  12 +
 .../spacing/margin.md}                        |   6 +-
 .../utilities/spacing/negative-margin.md      | 106 ++++++++
 docs/source/utilities/spacing/padding.md      | 106 ++++++++
 docs/source/utilities/text/alignment.md       |  12 +
 docs/source/utilities/text/color.md           |  12 +
 docs/source/utilities/text/fonts.md           |  34 +++
 docs/source/utilities/text/letter-spacing.md  |  12 +
 docs/source/utilities/text/line-height.md     |  12 +
 docs/source/utilities/text/sizing.md          |  12 +
 docs/source/utilities/text/style.md           |  12 +
 docs/source/utilities/text/weight.md          |  12 +
 docs/source/utilities/text/wrapping.md        |  12 +
 docs/source/utilities/visibility.md           |  12 +
 docs/source/utilities/z-index.md              |  12 +
 docs/source/workflow/adding-new-utilities.md  |   6 +
 docs/source/workflow/customizing-tailwind.md  |   6 +
 docs/source/workflow/extracting-components.md |   6 +
 docs/source/workflow/responsive-design.md     |   6 +
 docs/source/workflow/working-utility-first.md |   6 +
 docs/source/z-index.md                        |   6 -
 docs/tailwind.js                              |   5 +
 59 files changed, 1157 insertions(+), 437 deletions(-)
 delete mode 100644 docs/source/colors.md
 delete mode 100644 docs/source/constrain.md
 delete mode 100644 docs/source/flexbox.md
 delete mode 100644 docs/source/images.md
 delete mode 100644 docs/source/overflow.md
 delete mode 100644 docs/source/text.md
 create mode 100644 docs/source/utilities/alignment.md
 create mode 100644 docs/source/utilities/appearance.md
 rename docs/source/{ => utilities}/backgrounds.md (100%)
 create mode 100644 docs/source/utilities/backgrounds/color.md
 create mode 100644 docs/source/utilities/backgrounds/position.md
 create mode 100644 docs/source/utilities/backgrounds/size.md
 rename docs/source/{ => utilities}/borders.md (100%)
 create mode 100644 docs/source/utilities/borders/base.md
 create mode 100644 docs/source/utilities/borders/color.md
 create mode 100644 docs/source/utilities/borders/radius.md
 create mode 100644 docs/source/utilities/borders/style.md
 create mode 100644 docs/source/utilities/container.md
 rename docs/source/{ => utilities}/display.md (70%)
 create mode 100644 docs/source/utilities/flexbox.md
 create mode 100644 docs/source/utilities/floats.md
 create mode 100644 docs/source/utilities/interactivity/cursor.md
 create mode 100644 docs/source/utilities/interactivity/pointer-events.md
 create mode 100644 docs/source/utilities/interactivity/resize.md
 create mode 100644 docs/source/utilities/interactivity/user-select.md
 create mode 100644 docs/source/utilities/opacity.md
 create mode 100644 docs/source/utilities/overflow.md
 rename docs/source/{position.md => utilities/positioning.md} (81%)
 rename docs/source/{ => utilities}/shadows.md (100%)
 create mode 100644 docs/source/utilities/sizing/height.md
 create mode 100644 docs/source/utilities/sizing/max-height.md
 create mode 100644 docs/source/utilities/sizing/max-width.md
 create mode 100644 docs/source/utilities/sizing/min-height.md
 create mode 100644 docs/source/utilities/sizing/min-width.md
 create mode 100644 docs/source/utilities/sizing/width.md
 rename docs/source/{spacing.md => utilities/spacing/margin.md} (99%)
 create mode 100644 docs/source/utilities/spacing/negative-margin.md
 create mode 100644 docs/source/utilities/spacing/padding.md
 create mode 100644 docs/source/utilities/text/alignment.md
 create mode 100644 docs/source/utilities/text/color.md
 create mode 100644 docs/source/utilities/text/fonts.md
 create mode 100644 docs/source/utilities/text/letter-spacing.md
 create mode 100644 docs/source/utilities/text/line-height.md
 create mode 100644 docs/source/utilities/text/sizing.md
 create mode 100644 docs/source/utilities/text/style.md
 create mode 100644 docs/source/utilities/text/weight.md
 create mode 100644 docs/source/utilities/text/wrapping.md
 create mode 100644 docs/source/utilities/visibility.md
 create mode 100644 docs/source/utilities/z-index.md
 create mode 100644 docs/source/workflow/adding-new-utilities.md
 create mode 100644 docs/source/workflow/customizing-tailwind.md
 create mode 100644 docs/source/workflow/extracting-components.md
 create mode 100644 docs/source/workflow/responsive-design.md
 create mode 100644 docs/source/workflow/working-utility-first.md
 delete mode 100644 docs/source/z-index.md

diff --git a/docs/config.php b/docs/config.php
index b3db65f4e..eb5dd76a3 100644
--- a/docs/config.php
+++ b/docs/config.php
@@ -4,5 +4,8 @@ return [
     'baseUrl' => '',
     'production' => false,
     'collections' => [],
-    'colors' => ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink']
+    'colors' => ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink'],
+    'active' => function ($page, $path) {
+        return str_contains($page->getPath(), $path);
+    }
 ];
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index bd439f9ff..339fb7c3c 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -31,42 +31,120 @@
                 <div class="w-full lg:w-1/4">
                     <nav class="py-4 text-light text-base">
                         <div>
-                            <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Introduction</p>
+                            <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Getting Started</p>
                             <ul>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/installation' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/changelog' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
+                                <li class="mb-2"><a class="text-dark-soft" href="{{ $page->baseUrl }}/installation">Installation</a></li>
+                                <li class="mb-2"><a class="text-dark-soft" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
                             </ul>
                         </div>
                         <div class="mt-8">
-                            <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Concepts</p>
+                            <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Workflow</p>
                             <ul>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/principles' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/customization' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/customization">Customization</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/responsive' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/responsive">Responsive</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/colors' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/colors">Colors</a></li>
+                                <li class="mb-2">
+                                    <a class="{{ $page->active('/working-utility-first') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/working-utility-first">
+                                        Working Utility-First
+                                    </a>
+                                </li>
+                                <li class="mb-2">
+                                    <a class="{{ $page->active('/responsive-design') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
+                                        Responsive Design
+                                    </a>
+                                </li>
+                                <li class="mb-2">
+                                    <a class="{{ $page->active('/extracting-components') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
+                                        Extracting Components
+                                    </a>
+                                </li>
+                                <li class="mb-2">
+                                    <a class="{{ $page->active('/adding-new-utilities') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
+                                        Adding New Utilities
+                                    </a>
+                                </li>
+                                <li class="mb-2">
+                                    <a class="{{ $page->active('/customizing-tailwind') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/customizing-tailwind">
+                                        Customizing Tailwind
+                                    </a>
+                                </li>
                             </ul>
                         </div>
                         <div class="mt-8">
                             <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Utilities</p>
-                            <ul>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/backgrounds' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/borders' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/constrain' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/display' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/display">Display</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/flexbox' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flexbox">Flexbox</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/grid' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/images' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/overflow' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/overflow">Overflow</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/position' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/shadows' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/shadows">Shadows</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/spacing' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/text' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/z-index' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
+                            <ul class="mb-8">
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/alignment" class="{{ $page->active('/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/appearance" class="{{ $page->active('/appearance') ? 'text-dark text-medium' : 'text-dark-soft' }}">Appearance</a></li>
+                                <li class="mb-2">
+                                    <a href="{{ $page->baseUrl }}/utilities/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Backgrounds</a>
+                                    <ul class="pl-4 {{ $page->active('/backgrounds/') ? 'block' : 'hidden' }}">
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-dark text-medium' : 'text-dark-soft' }}">Position</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-dark text-medium' : 'text-dark-soft' }}">Size</a></li>
+                                    </ul>
+                                </li>
+                                <li class="mb-2">
+                                    <a href="{{ $page->baseUrl }}/utilities/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Borders</a>
+                                    <ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/base" class="{{ $page->active('/borders/base') ? 'text-dark text-medium' : 'text-dark-soft' }}">Base</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/color" class="{{ $page->active('/borders/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/style" class="{{ $page->active('/borders/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-dark text-medium' : 'text-dark-soft' }}">Radius</a></li>
+                                    </ul>
+                                </li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/container" class="{{ $page->active('/container') ? 'text-dark text-medium' : 'text-dark-soft' }}">Container</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/display" class="{{ $page->active('/display') ? 'text-dark text-medium' : 'text-dark-soft' }}">Display</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/flexbox" class="{{ $page->active('/flexbox') ? 'text-dark text-medium' : 'text-dark-soft' }}">Flexbox</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/floats" class="{{ $page->active('/floats') ? 'text-dark text-medium' : 'text-dark-soft' }}">Floats</a></li>
+                                <li class="mb-2">
+                                    <a href="{{ $page->baseUrl }}/utilities/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Interactivity</a>
+                                    <ul class="pl-4 {{ $page->active('/interactivity/') ? 'block' : 'hidden' }}">
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-dark text-medium' : 'text-dark-soft' }}">Cursor</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/resize" class="{{ $page->active('/resize') ? 'text-dark text-medium' : 'text-dark-soft' }}">Resize</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-dark text-medium' : 'text-dark-soft' }}">Pointer Events</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-dark text-medium' : 'text-dark-soft' }}">User Select</a></li>
+                                    </ul>
+                                </li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/opacity" class="{{ $page->active('/opacity') ? 'text-dark text-medium' : 'text-dark-soft' }}">Opacity</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/overflow" class="{{ $page->active('/overflow') ? 'text-dark text-medium' : 'text-dark-soft' }}">Overflow</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/positioning" class="{{ $page->active('/positioning') ? 'text-dark text-medium' : 'text-dark-soft' }}">Positioning</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/shadows" class="{{ $page->active('/shadows') ? 'text-dark text-medium' : 'text-dark-soft' }}">Shadows</a></li>
+                                <li class="mb-2">
+                                    <a href="{{ $page->baseUrl }}/utilities/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Sizing</a>
+                                    <ul class="pl-4 {{ $page->active('/sizing/') ? 'block' : 'hidden' }}">
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Width</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Min-Width</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-dark text-medium' : 'text-dark-soft' }}">Max-Width</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Height</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Min-Height</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Max-Height</a></li>
+                                    </ul>
+                                </li>
+                                <li class="mb-2">
+                                    <a href="{{ $page->baseUrl }}/utilities/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Spacing</a>
+                                    <ul class="pl-4 {{ $page->active('/spacing/') ? 'block' : 'hidden' }}">
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-dark text-medium' : 'text-dark-soft' }}">Padding</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-dark text-medium' : 'text-dark-soft' }}">Margin</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-dark text-medium' : 'text-dark-soft' }}">Negative Margin</a></li>
+                                    </ul>
+                                </li>
+                                <li class="mb-2">
+                                    <a href="{{ $page->baseUrl }}/utilities/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-dark text-medium' : 'text-dark-soft' }}">Text</a>
+                                    <ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-dark text-medium' : 'text-dark-soft' }}">Fonts</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/color" class="{{ $page->active('/text/color') ? 'text-dark text-medium' : 'text-dark-soft' }}">Color</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Sizing</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/weight" class="{{ $page->active('/text/weight') ? 'text-dark text-medium' : 'text-dark-soft' }}">Weight</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-dark text-medium' : 'text-dark-soft' }}">Line Height</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-dark text-medium' : 'text-dark-soft' }}">Letter Spacing</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/alignment" class="{{ $page->active('/text/alignment') ? 'text-dark text-medium' : 'text-dark-soft' }}">Alignment</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-dark text-medium' : 'text-dark-soft' }}">Wrapping</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/text/style" class="{{ $page->active('/text/style') ? 'text-dark text-medium' : 'text-dark-soft' }}">Style &amp; Decoration</a></li>
+                                    </ul>
+                                </li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/visibility" class="{{ $page->active('/visibility') ? 'text-dark text-medium' : 'text-dark-soft' }}">Visibility</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/utilities/z-index" class="{{ $page->active('/z-index') ? 'text-dark text-medium' : 'text-dark-soft' }}">Z-Index</a></li>
                             </ul>
                         </div>
                         <div class="mt-8">
-                            <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Components</p>
+                            <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Examples</p>
                             <ul>
                                 <li class="mb-2"><a class="{{ $page->getUrl() === '/buttons' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/buttons">Buttons</a></li>
                                 <li class="mb-2"><a class="{{ $page->getUrl() === '/forms' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/forms">Forms</a></li>
diff --git a/docs/source/colors.md b/docs/source/colors.md
deleted file mode 100644
index c34f9c5db..000000000
--- a/docs/source/colors.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.markdown
-title: "Colors"
----
-
-# Colors
diff --git a/docs/source/constrain.md b/docs/source/constrain.md
deleted file mode 100644
index 2c8cbd5ed..000000000
--- a/docs/source/constrain.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-extends: _layouts.markdown
-title: "Constrain"
----
-
-# Constrain
-
-The constrain utilities are simply `max-width` helpers designed to constrain content to a desired width.
-
-```html
-<!-- Using the utilities in HTML: -->
-
-<div class="constrain-xl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
-```
-
-```less
-// Using the utilities in Less:
-
-div {
-  .constrain-xs;
-  .constrain-sm;
-  .constrain-md;
-  .constrain-lg;
-  .constrain-xl;
-  .constrain-2xl;
-  .constrain-3xl;
-  .constrain-4xl;
-  .constrain-5xl;
-}
-```
-
-## Responsive
-
-The constrain utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
-
-```html
-<!-- Using the utilities in HTML: -->
-
-<div class="constrain-xs sm:constrain-sm md:constrain-md lg:constrain-lg">Lorem ipsum dolor...</div>
-```
-
-```less
-// Using the utilities in Less:
-
-div {
-  .screen(lg, {
-    .constrain-lg;
-  });
-}
-```
-
-## Customization
-
-Tailwind exposes the following variables to allow modification of the constrain utilities.
-
-```less
-@constrain-xs:  20rem;
-@constrain-sm:  30rem;
-@constrain-md:  40rem;
-@constrain-lg:  50rem;
-@constrain-xl:  60rem;
-@constrain-2xl: 70rem;
-@constrain-3xl: 80rem;
-@constrain-4xl: 90rem;
-@constrain-5xl: 100rem;
-```
diff --git a/docs/source/examples.blade.php b/docs/source/examples.blade.php
index 2c3c592ca..8d2ea58b0 100644
--- a/docs/source/examples.blade.php
+++ b/docs/source/examples.blade.php
@@ -34,7 +34,7 @@
     </button>
 </div>
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-dark @bg-dark-dark mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-dark mr-4">
         Save
     </button>
     <button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
@@ -47,7 +47,7 @@
 
 @foreach($page->colors as $color)
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} @bg-{{$color}}-dark mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} hover:bg-{{$color}}-dark mr-4">
         Save
     </button>
     <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}}-light mr-4">
@@ -60,7 +60,7 @@
 
 @foreach($page->colors as $color)
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark @text-light border border-{{$color}} @bg-{{$color}} mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark hover:text-light border border-{{$color}} hover:bg-{{$color}} mr-4">
         Save
     </button>
     <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-light border border-{{$color}}-light mr-4">
@@ -71,7 +71,7 @@
 
 <h2 class="markdown">Cards</h2>
 
-<div class="constrain-sm mb-8">
+<div class="max-w-sm mb-8">
     <div class="rounded overflow-hidden shadow-3">
         <img class="fit w-full" src="/img/card-top.jpg" alt="">
         <div class="px-6 py-4">
@@ -88,7 +88,7 @@
     </div>
 </div>
 
-<div class="constrain-md">
+<div class="max-w-md">
     <div class="flex">
         <div class="rounded-l w-128 text-center overflow-hidden">
             <img class="h-64" src="/img/card-left.jpg" alt="">
diff --git a/docs/source/flexbox.md b/docs/source/flexbox.md
deleted file mode 100644
index aa12545d8..000000000
--- a/docs/source/flexbox.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.markdown
-title: "Flexbox"
----
-
-# Flexbox
diff --git a/docs/source/images.md b/docs/source/images.md
deleted file mode 100644
index 0d40d2a8b..000000000
--- a/docs/source/images.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.markdown
-title: "Images"
----
-
-# Images
diff --git a/docs/source/overflow.md b/docs/source/overflow.md
deleted file mode 100644
index 2f42e7317..000000000
--- a/docs/source/overflow.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-extends: _layouts.markdown
-title: "Overflow"
----
-
-# Overflow
-
-The overflow utilities are simply `overflow` property helpers.
-
-```html
-<div class="overflow-auto"></div>
-<div class="overflow-hidden"></div>
-<div class="overflow-visible"></div>
-<div class="overflow-scroll"></div>
-<div class="overflow-scroll-x"></div>
-<div class="overflow-scroll-y"></div>
-<div class="mask"></div>
-```
-
-```less
-
-
-div {
-  .overflow-auto;
-  .overflow-hidden;
-  .overflow-visible;
-  .overflow-scroll;
-  .overflow-scroll-x;
-  .overflow-scroll-y;
-  .mask;
-}
-```
-
-Note that `.overflow-hidden` is available in a shorthand called `.mask`.
-
-## Responsive
-
-The display utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
-
-```html
-<div class="overflow-auto sm:overflow-hidden md:overflow-visible lg:overflow-scroll"></div>
-```
-
-```less
-div {
-  .screen(lg, {
-    .overflow-scroll;
-  });
-}
-```
diff --git a/docs/source/text.md b/docs/source/text.md
deleted file mode 100644
index 61bd829f5..000000000
--- a/docs/source/text.md
+++ /dev/null
@@ -1,243 +0,0 @@
----
-extends: _layouts.markdown
-title: "Text"
----
-
-# Text
-
-<div class="subnav">
-    <a class="subnav-link" href="#font-family">Family</a>
-    <a class="subnav-link" href="#font-sizes">Sizes</a>
-    <a class="subnav-link" href="#font-weight">Weight</a>
-    <a class="subnav-link" href="#colors">Colors</a>
-    <a class="subnav-link" href="#alignment">Alignment</a>
-    <a class="subnav-link" href="#styles">Styles</a>
-    <a class="subnav-link" href="#line-height">Line height</a>
-    <a class="subnav-link" href="#letter-spacing">Letter spacing</a>
-</div>
-
-<h2 id="font-family">Font family</h2>
-
-```html
-<div class="sans"></div>
-<div class="serif"></div>
-<div class="mono"></div>
-```
-
-```less
-div {
-  .sans;
-  .serif;
-  .mono;
-}
-```
-
-```less
-// Customize the font stack
-@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
-@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
-@font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
-@font-family-base: @font-family-sans;
-```
-
-<h2 id="font-sizes">Font sizes</h2>
-
-```html
-<div class="text-xs"></div>
-<div class="text-sm"></div>
-<div class="text-base"></div>
-<div class="text-lg"></div>
-<div class="text-xl"></div>
-<div class="text-2xl"></div>
-<div class="text-3xl"></div>
-```
-
-```less
-div {
-  .text-xs;
-  .text-sm;
-  .text-base;
-  .text-lg;
-  .text-xl;
-  .text-2xl;
-  .text-3xl;
-}
-```
-
-```less
-// Customize the text size scale
-@text-size-scale:
-  'xs' @font-size-xs,
-  'sm' @font-size-sm,
-  'base' @font-size-base,
-  'lg' @font-size-lg,
-  'xl' @font-size-xl,
-  '2xl' @font-size-2xl,
-  '3xl' @font-size-3xl,
-;
-```
-
-<h2 id="font-weight">Font weight</h2>
-
-```html
-<div class="text-hairline"></div>
-<div class="text-thin"></div>
-<div class="text-regular"></div>
-<div class="text-medium"></div>
-<div class="text-bold"></div>
-```
-
-```less
-div {
-  .text-hairline;
-  .text-thin;
-  .text-regular;
-  .text-medium;
-  .text-bold;
-}
-```
-
-```less
-// Customize the text weight scale
-@text-weight-scale:
-  'hairline' 200,
-  'thin' 300,
-  'regular' 400,
-  'medium' 600,
-  'bold' 700,
-;
-```
-
-<h2 id="colors">Colors</h2>
-
-```html
-<div class="text-light"></div>
-<div class="text-light-soft"></div>
-<div class="text-light-softer"></div>
-<div class="text-light-softest"></div>
-
-<div class="text-dark"></div>
-<div class="text-dark-soft"></div>
-<div class="text-dark-softer"></div>
-<div class="text-dark-softest"></div>
-```
-
-```less
-div {
-  .text-light;
-  .text-light-soft;
-  .text-light-softer;
-  .text-light-softest;
-
-  .text-dark;
-  .text-dark-soft;
-  .text-dark-softer;
-  .text-dark-softest;
-}
-```
-
-```less
-// Customize the text colors
-@text-colors:
-  'light' hsl(0, 0%, 100%),
-  'light-soft' hsl(0, 0%, 60%),
-  'light-softer' hsl(0, 0%, 45%),
-  'light-softest' hsl(0, 0%, 35%),
-
-  'dark' hsl(0, 0%, 25%),
-  'dark-soft' hsl(0, 0%, 50%),
-  'dark-softer' hsl(0, 0%, 65%),
-  'dark-softest' hsl(0, 0%, 75%),
-;
-```
-
-<h2 id="alignment">Alignment</h2>
-
-```less
-div {
-  // Horizontal
-  .text-center;
-  .text-left;
-  .text-right;
-  .text-justify;
-
-  // Vertical
-  .align-baseline;
-  .align-top;
-  .align-middle;
-  .align-bottom;
-  .align-text-top;
-  .align-text-bottom;
-}
-```
-
-<h2 id="styles">Styles</h2>
-
-```less
-div { .text-em; }            // Italic
-div { .text-uppercase; }     // Uppercase
-div { .text-underline; }     // Underline
-div { .text-break; }         // Pre line
-div { .text-no-wrap; }       // No wrap
-div { .text-force-wrap; }    // Break word
-div { .text-smooth; }        // Anti-aliased
-div { .text-strike; }        // Line through
-div { .text-ellipsis; }      // Overflow ellipsis
-div { .text-shadow-solid; }  // Shadow
-```
-
-<h2 id="line-height">Line height</h2>
-
-```html
-<div class="leading-none"></div>
-<div class="leading-tight"></div>
-<div class="leading-normal"></div>
-<div class="leading-loose"></div>
-```
-
-```less
-div {
-  .leading-none;
-  .leading-tight;
-  .leading-normal;
-  .leading-loose;
-}
-```
-
-```less
-// Set the default line height
-@line-height: 1.5;
-
-// Customize the leading scale
-@leading-scale:
-  'none' 1,
-  'tight' 1.25,
-  'normal' 1.5,
-  'loose' 2,
-;
-```
-
-<h2 id="letter-spacing">Letter spacing</h2>
-
-```html
-<div class="tracking-tight"></div>
-<div class="tracking-normal"></div>
-<div class="tracking-wide"></div>
-```
-
-```less
-div {
-  .tracking-tight;
-  .tracking-normal;
-  .tracking-wide;
-}
-```
-
-```less
-// Customize the tracking scale
-@tracking-scale:
-  'tight' -0.05em,
-  'normal' 0,
-  'wide' 0.1em,
-;
-```
diff --git a/docs/source/utilities/alignment.md b/docs/source/utilities/alignment.md
new file mode 100644
index 000000000..d30b23379
--- /dev/null
+++ b/docs/source/utilities/alignment.md
@@ -0,0 +1,13 @@
+---
+extends: _layouts.markdown
+title: "Alignment"
+---
+
+# Alignment
+
+<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>
+
diff --git a/docs/source/utilities/appearance.md b/docs/source/utilities/appearance.md
new file mode 100644
index 000000000..a65f62d9a
--- /dev/null
+++ b/docs/source/utilities/appearance.md
@@ -0,0 +1,13 @@
+---
+extends: _layouts.markdown
+title: "Appearance"
+---
+
+# Appearance
+
+<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>
+
diff --git a/docs/source/backgrounds.md b/docs/source/utilities/backgrounds.md
similarity index 100%
rename from docs/source/backgrounds.md
rename to docs/source/utilities/backgrounds.md
diff --git a/docs/source/utilities/backgrounds/color.md b/docs/source/utilities/backgrounds/color.md
new file mode 100644
index 000000000..de300b7e6
--- /dev/null
+++ b/docs/source/utilities/backgrounds/color.md
@@ -0,0 +1,234 @@
+---
+extends: _layouts.markdown
+title: "Backgrounds"
+---
+
+# Background Color
+
+<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>
+
+<h2 id="colors">Colors</h2>
+
+
+<div class="flex flex-wrap pull-x-4 mb-4">
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="bg-light px-6 py-4 text-sm">
+        .bg-light
+      </div>
+      <div class="bg-light-soft px-6 py-4 text-sm">
+        .bg-light-soft
+      </div>
+      <div class="bg-light-softer px-6 py-4 text-sm">
+        .bg-light-softer
+      </div>
+      <div class="bg-light-softest px-6 py-4 text-sm">
+        .bg-light-softest
+      </div>
+    </div>
+  </div>
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-dark px-6 py-4 text-sm">
+        .bg-dark
+      </div>
+      <div class="text-light bg-dark-soft px-6 py-4 text-sm">
+        .bg-dark-soft
+      </div>
+      <div class="text-light bg-dark-softer px-6 py-4 text-sm">
+        .bg-dark-softer
+      </div>
+      <div class="text-light bg-dark-softest px-6 py-4 text-sm">
+        .bg-dark-softest
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="flex flex-wrap pull-x-4 mb-4">
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-red-dark px-6 py-4 text-sm">
+        .bg-red-dark
+      </div>
+      <div class="text-light bg-red px-6 py-4 text-sm">
+        .bg-red
+      </div>
+      <div class="text-light bg-red-light px-6 py-4 text-sm">
+        .bg-red-light
+      </div>
+      <div class="text-red-dark bg-red-lightest px-6 py-4 text-sm">
+        .bg-red-lightest
+      </div>
+    </div>
+  </div>
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-orange-dark px-6 py-4 text-sm">
+        .bg-orange-dark
+      </div>
+      <div class="text-light bg-orange px-6 py-4 text-sm">
+        .bg-orange
+      </div>
+      <div class="text-orange-dark bg-orange-light px-6 py-4 text-sm">
+        .bg-orange-light
+      </div>
+      <div class="text-orange-dark bg-orange-lightest px-6 py-4 text-sm">
+        .bg-orange-lightest
+      </div>
+    </div>
+  </div>
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-yellow-dark px-6 py-4 text-sm">
+        .bg-yellow-dark
+      </div>
+      <div class="text-light bg-yellow px-6 py-4 text-sm">
+        .bg-yellow
+      </div>
+      <div class="text-yellow-dark bg-yellow-light px-6 py-4 text-sm">
+        .bg-yellow-light
+      </div>
+      <div class="text-yellow-dark bg-yellow-lightest px-6 py-4 text-sm">
+        .bg-yellow-lightest
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="flex flex-wrap pull-x-4 mb-4">
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-green-dark px-6 py-4 text-sm">
+        .bg-green-dark
+      </div>
+      <div class="text-light bg-green px-6 py-4 text-sm">
+        .bg-green
+      </div>
+      <div class="text-green-dark bg-green-light px-6 py-4 text-sm">
+        .bg-green-light
+      </div>
+      <div class="text-green-dark bg-green-lightest px-6 py-4 text-sm">
+        .bg-green-lightest
+      </div>
+    </div>
+  </div>
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-teal-dark px-6 py-4 text-sm">
+        .bg-teal-dark
+      </div>
+      <div class="text-light bg-teal px-6 py-4 text-sm">
+        .bg-teal
+      </div>
+      <div class="text-teal-dark bg-teal-light px-6 py-4 text-sm">
+        .bg-teal-light
+      </div>
+      <div class="text-teal-dark bg-teal-lightest px-6 py-4 text-sm">
+        .bg-teal-lightest
+      </div>
+    </div>
+  </div>
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-blue-dark px-6 py-4 text-sm">
+        .bg-blue-dark
+      </div>
+      <div class="text-light bg-blue px-6 py-4 text-sm">
+        .bg-blue
+      </div>
+      <div class="text-blue-dark bg-blue-light px-6 py-4 text-sm">
+        .bg-blue-light
+      </div>
+      <div class="text-blue-dark bg-blue-lightest px-6 py-4 text-sm">
+        .bg-blue-lightest
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="flex flex-wrap pull-x-4 mb-4">
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-indigo-dark px-6 py-4 text-sm">
+        .bg-indigo-dark
+      </div>
+      <div class="text-light bg-indigo px-6 py-4 text-sm">
+        .bg-indigo
+      </div>
+      <div class="text-indigo-dark bg-indigo-light px-6 py-4 text-sm">
+        .bg-indigo-light
+      </div>
+      <div class="text-indigo-dark bg-indigo-lightest px-6 py-4 text-sm">
+        .bg-indigo-lightest
+      </div>
+    </div>
+  </div>
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-purple-dark px-6 py-4 text-sm">
+        .bg-purple-dark
+      </div>
+      <div class="text-light bg-purple px-6 py-4 text-sm">
+        .bg-purple
+      </div>
+      <div class="text-purple-dark bg-purple-light px-6 py-4 text-sm">
+        .bg-purple-light
+      </div>
+      <div class="text-purple-dark bg-purple-lightest px-6 py-4 text-sm">
+        .bg-purple-lightest
+      </div>
+    </div>
+  </div>
+  <div class="w-full md:w-1/3 px-4">
+    <div class="rounded overflow-hidden">
+      <div class="text-light bg-pink-dark px-6 py-4 text-sm">
+        .bg-pink-dark
+      </div>
+      <div class="text-light bg-pink px-6 py-4 text-sm">
+        .bg-pink
+      </div>
+      <div class="text-pink-dark bg-pink-light px-6 py-4 text-sm">
+        .bg-pink-light
+      </div>
+      <div class="text-pink-dark bg-pink-lightest px-6 py-4 text-sm">
+        .bg-pink-lightest
+      </div>
+    </div>
+  </div>
+</div>
+
+Using the utilities in HTML:
+
+```html
+<div class="bg-light"></div>
+<div class="bg-light-soft"></div>
+<div class="bg-light-softer"></div>
+<div class="bg-light-softest"></div>
+
+<div class="bg-dark"></div>
+<div class="bg-dark-soft"></div>
+<div class="bg-dark-softer"></div>
+<div class="bg-dark-softest"></div>
+```
+
+Using the utilities in Less:
+
+```less
+div {
+  .bg-light;
+  .bg-light-soft;
+  .bg-light-softer;
+  .bg-light-softest;
+
+  .bg-dark;
+  .bg-dark-soft;
+  .bg-dark-softer;
+  .bg-dark-softest;
+}
+```
+
diff --git a/docs/source/utilities/backgrounds/position.md b/docs/source/utilities/backgrounds/position.md
new file mode 100644
index 000000000..856a98a3f
--- /dev/null
+++ b/docs/source/utilities/backgrounds/position.md
@@ -0,0 +1,13 @@
+---
+extends: _layouts.markdown
+title: "Background Position"
+---
+
+# Background Position
+
+<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>
+
diff --git a/docs/source/utilities/backgrounds/size.md b/docs/source/utilities/backgrounds/size.md
new file mode 100644
index 000000000..3ed4afc1f
--- /dev/null
+++ b/docs/source/utilities/backgrounds/size.md
@@ -0,0 +1,13 @@
+---
+extends: _layouts.markdown
+title: "Background Size"
+---
+
+# Background Size
+
+<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>
+
diff --git a/docs/source/borders.md b/docs/source/utilities/borders.md
similarity index 100%
rename from docs/source/borders.md
rename to docs/source/utilities/borders.md
diff --git a/docs/source/utilities/borders/base.md b/docs/source/utilities/borders/base.md
new file mode 100644
index 000000000..160fea63d
--- /dev/null
+++ b/docs/source/utilities/borders/base.md
@@ -0,0 +1,77 @@
+---
+extends: _layouts.markdown
+title: "Borders"
+---
+
+# Borders
+
+
+<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>
+
+<h2 id="sizes">Sizes</h2>
+
+Construct border size utilities 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. By default, borders are `solid`, and use the `@default-border-color`.
+
+<div class="flex items-start mt-8 text-sm leading-none">
+    <div class="pr-12">
+        <div class="mb-3 text-dark-soft text-uppercase">Class</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">border</code></div>
+    </div>
+    <div class="pl-12 pr-12 border-l">
+        <div class="mb-3 text-dark-soft"><span class="text-uppercase">Side</span> <span class="text-dark-softer text-xs">(optional)</span></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-light-softer">&nbsp;</code> All</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
+    </div>
+    <div class="pl-12 border-l">
+        <div class="mb-3 text-dark-soft"><span class="text-uppercase">Width</span> <span class="text-dark-softer text-xs">(optional)</span></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-light-softer">&nbsp;</code> 1px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 2px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 4px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 8px</div>
+    </div>
+</div>
+
+### Border size examples
+
+```html
+<!-- Add a 1px border to all sides -->
+<div class="border"></div>
+
+<!-- Add a 1px border to the top side -->
+<div class="border-t"></div>
+
+<!-- Add a 2px border to the top side -->
+<div class="border-t-2"></div>
+```
+
+```less
+// Using the border size utilities in Less
+div {
+    .border;
+    .border-t;
+    .border-t-2;
+}
+```
+
+### Customizing border sizes
+
+You can easily customize the border size utilities using the `@border-width-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
+
+```less
+// The default border width scale
+@border-width-scale:
+  '0' 0,
+  default 1px,
+  '2' 2px,
+  '4' 4px,
+  '8' 8px,
+;
+```
diff --git a/docs/source/utilities/borders/color.md b/docs/source/utilities/borders/color.md
new file mode 100644
index 000000000..c8d0cc409
--- /dev/null
+++ b/docs/source/utilities/borders/color.md
@@ -0,0 +1,56 @@
+---
+extends: _layouts.markdown
+title: "Border Color"
+---
+
+# Border Color
+
+<div class="subnav">
+    <a class="subnav-link" href="#color">Color</a>
+    <a class="subnav-link" href="#responsive">Responsive</a>
+</div>
+
+<h2 id="colors">Colors</h2>
+
+By default, borders use the `@default-border-color`. To override a border color, add one of the border color utilities.
+
+```html
+<div class="border border-dark"></div>
+<div class="border border-dark-soft"></div>
+<div class="border border-dark-softer"></div>
+
+<div class="border border-light"></div>
+<div class="border border-light-soft"></div>
+<div class="border border-light-softer"></div>
+
+<div class="border border-invisible"></div>
+```
+
+```less
+div {
+  .border-dark;
+  .border-dark-soft;
+  .border-dark-softer;
+
+  .border-light;
+  .border-light-soft;
+  .border-light-softer;
+
+  .border-invisible;
+}
+```
+
+The default border colors can also be modified using the following variables.
+
+```less
+// Variable:            Default:
+@border-dark:           hsl(0, 0%, 82%);
+@border-dark-soft:      hsl(0, 0%, 90%);
+@border-dark-softer:    hsl(0, 0%, 96%);
+
+@border-light:          hsl(0, 0%, 100%);
+@border-light-soft:     hsl(0, 0%, 60%);
+@border-light-softer:   hsl(0, 0%, 35%);
+
+@default-border-color:  @border-dark-soft;
+```
diff --git a/docs/source/utilities/borders/radius.md b/docs/source/utilities/borders/radius.md
new file mode 100644
index 000000000..e93bf6ca1
--- /dev/null
+++ b/docs/source/utilities/borders/radius.md
@@ -0,0 +1,13 @@
+---
+extends: _layouts.markdown
+title: "Border Radius"
+---
+
+# Border Radius
+
+<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>
+
diff --git a/docs/source/utilities/borders/style.md b/docs/source/utilities/borders/style.md
new file mode 100644
index 000000000..cc442be8f
--- /dev/null
+++ b/docs/source/utilities/borders/style.md
@@ -0,0 +1,13 @@
+---
+extends: _layouts.markdown
+title: "Border Style"
+---
+
+# Border Style
+
+<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>
+
diff --git a/docs/source/utilities/container.md b/docs/source/utilities/container.md
new file mode 100644
index 000000000..dbe2d61c5
--- /dev/null
+++ b/docs/source/utilities/container.md
@@ -0,0 +1,13 @@
+---
+extends: _layouts.markdown
+title: "Container"
+---
+
+# Container
+
+<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>
+
diff --git a/docs/source/display.md b/docs/source/utilities/display.md
similarity index 70%
rename from docs/source/display.md
rename to docs/source/utilities/display.md
index 09b41897a..886458622 100644
--- a/docs/source/display.md
+++ b/docs/source/utilities/display.md
@@ -5,13 +5,20 @@ title: "Display"
 
 # Display
 
-> If you're looking for flexbox utilities, see the [flexbox](/flexbox) page.
+<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>
+
+> If you're looking for Flexbox utilities, see the [Flexbox](/flexbox) page.
 
 The display utilities simply `display` property helpers.
 
 ```html
 <!-- Using the utilities in HTML: -->
 
+<div class="inline"></div>
 <div class="block"></div>
 <div class="inline-block"></div>
 <div class="hidden"></div>
@@ -23,19 +30,6 @@ The display utilities simply `display` property helpers.
 </div>
 ```
 
-```less
-// Using the utilities in Less:
-
-div {
-  .block;
-  .inline-block;
-  .table;
-  .table-row;
-  .table-cell;
-  .hidden;
-}
-```
-
 ## Responsive
 
 The display utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
diff --git a/docs/source/utilities/flexbox.md b/docs/source/utilities/flexbox.md
new file mode 100644
index 000000000..59ee194fe
--- /dev/null
+++ b/docs/source/utilities/flexbox.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+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>
diff --git a/docs/source/utilities/floats.md b/docs/source/utilities/floats.md
new file mode 100644
index 000000000..4d160fa66
--- /dev/null
+++ b/docs/source/utilities/floats.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Floats"
+---
+
+# Floats
+
+<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>
diff --git a/docs/source/utilities/interactivity/cursor.md b/docs/source/utilities/interactivity/cursor.md
new file mode 100644
index 000000000..bd89925f6
--- /dev/null
+++ b/docs/source/utilities/interactivity/cursor.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Cursor"
+---
+
+# Cursor
+
+<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>
diff --git a/docs/source/utilities/interactivity/pointer-events.md b/docs/source/utilities/interactivity/pointer-events.md
new file mode 100644
index 000000000..d9d6f0a83
--- /dev/null
+++ b/docs/source/utilities/interactivity/pointer-events.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Pointer Events"
+---
+
+# Pointer Events
+
+<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>
diff --git a/docs/source/utilities/interactivity/resize.md b/docs/source/utilities/interactivity/resize.md
new file mode 100644
index 000000000..35ae6acdf
--- /dev/null
+++ b/docs/source/utilities/interactivity/resize.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Resize"
+---
+
+# Resize
+
+<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>
diff --git a/docs/source/utilities/interactivity/user-select.md b/docs/source/utilities/interactivity/user-select.md
new file mode 100644
index 000000000..57b44f298
--- /dev/null
+++ b/docs/source/utilities/interactivity/user-select.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "User Select"
+---
+
+# User Select
+
+<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>
diff --git a/docs/source/utilities/opacity.md b/docs/source/utilities/opacity.md
new file mode 100644
index 000000000..61910d60b
--- /dev/null
+++ b/docs/source/utilities/opacity.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Opacity"
+---
+
+# Opacity
+
+<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>
diff --git a/docs/source/utilities/overflow.md b/docs/source/utilities/overflow.md
new file mode 100644
index 000000000..a2f9f0861
--- /dev/null
+++ b/docs/source/utilities/overflow.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Overflow"
+---
+
+# Overflow
+
+<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>
diff --git a/docs/source/position.md b/docs/source/utilities/positioning.md
similarity index 81%
rename from docs/source/position.md
rename to docs/source/utilities/positioning.md
index 70052b376..e613e546f 100644
--- a/docs/source/position.md
+++ b/docs/source/utilities/positioning.md
@@ -1,9 +1,15 @@
 ---
 extends: _layouts.markdown
-title: "Position"
+title: "Positioning"
 ---
 
-# Position
+# Positioning
+
+<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>
 
 The position utilities are primarily `position` property helpers.
 
diff --git a/docs/source/shadows.md b/docs/source/utilities/shadows.md
similarity index 100%
rename from docs/source/shadows.md
rename to docs/source/utilities/shadows.md
diff --git a/docs/source/utilities/sizing/height.md b/docs/source/utilities/sizing/height.md
new file mode 100644
index 000000000..143ba34a4
--- /dev/null
+++ b/docs/source/utilities/sizing/height.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Height"
+---
+
+# Height
+
+<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>
diff --git a/docs/source/utilities/sizing/max-height.md b/docs/source/utilities/sizing/max-height.md
new file mode 100644
index 000000000..9cfa8d373
--- /dev/null
+++ b/docs/source/utilities/sizing/max-height.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Max-Height"
+---
+
+# Max-Height
+
+<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>
diff --git a/docs/source/utilities/sizing/max-width.md b/docs/source/utilities/sizing/max-width.md
new file mode 100644
index 000000000..171c505ae
--- /dev/null
+++ b/docs/source/utilities/sizing/max-width.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Max-Width"
+---
+
+# Max-Width
+
+<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>
diff --git a/docs/source/utilities/sizing/min-height.md b/docs/source/utilities/sizing/min-height.md
new file mode 100644
index 000000000..93138bd16
--- /dev/null
+++ b/docs/source/utilities/sizing/min-height.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Min-Height"
+---
+
+# Min-Height
+
+<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>
diff --git a/docs/source/utilities/sizing/min-width.md b/docs/source/utilities/sizing/min-width.md
new file mode 100644
index 000000000..0d1e5fb85
--- /dev/null
+++ b/docs/source/utilities/sizing/min-width.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Min-Width"
+---
+
+# Min-Width
+
+<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>
diff --git a/docs/source/utilities/sizing/width.md b/docs/source/utilities/sizing/width.md
new file mode 100644
index 000000000..42570a392
--- /dev/null
+++ b/docs/source/utilities/sizing/width.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Width"
+---
+
+# Width
+
+<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>
diff --git a/docs/source/spacing.md b/docs/source/utilities/spacing/margin.md
similarity index 99%
rename from docs/source/spacing.md
rename to docs/source/utilities/spacing/margin.md
index 276bcbf99..7ea91762d 100644
--- a/docs/source/spacing.md
+++ b/docs/source/utilities/spacing/margin.md
@@ -1,14 +1,14 @@
 ---
 extends: _layouts.markdown
-title: "Spacing"
+title: "Margin"
 ---
 
-# Spacing
+# Margin
 
 <div class="subnav">
     <a class="subnav-link" href="#usage">Usage</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
     <a class="subnav-link" href="#responsive">Responsive</a>
+    <a class="subnav-link" href="#customizing">Customizing</a>
 </div>
 
 <h2 id="usage">Using</h2>
diff --git a/docs/source/utilities/spacing/negative-margin.md b/docs/source/utilities/spacing/negative-margin.md
new file mode 100644
index 000000000..8f836ebfc
--- /dev/null
+++ b/docs/source/utilities/spacing/negative-margin.md
@@ -0,0 +1,106 @@
+---
+extends: _layouts.markdown
+title: "Negative Margin"
+---
+
+# Negative Margin
+
+<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>
+
+<h2 id="usage">Using</h2>
+
+The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero.
+
+<div class="flex items-start mt-8 text-sm">
+    <div class="pr-12">
+        <div class="mb-3 text-dark-soft text-uppercase">Class</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">m</code> Margin</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">pull</code> Negative Margin</div>
+    </div>
+    <div class="pl-12 pr-12 border-l">
+        <div class="mb-3 text-dark-soft"><span class="text-uppercase">Position</span> <span class="text-dark-softer text-xs">(optional)</span></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">x</code> Horizontal</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">y</code> Vertical</div>
+    </div>
+    <div class="pl-12 border-l">
+        <div class="mb-3 text-dark-soft text-uppercase">Space</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">1</code> 0.25rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 0.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">3</code> 0.75rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 1rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">6</code> 1.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 2rem</div>
+    </div>
+</div>
+
+<h2 id="customizing">Customizing the spacing scale</h2>
+
+You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
+
+```less
+// The default sizing scale
+@sizing-scale:
+  '1' 0.25rem,
+  '2' 0.5rem,
+  '3' 0.75rem,
+  '4' 1rem,
+  '6' 1.5rem,
+  '8' 2rem,
+  '12' 3rem,
+  '16' 4rem,
+;
+```
+
+By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
+
+```less
+// Override the margin scale
+@margin-scale:
+  '1' 0.25rem,
+  '2' 0.5rem,
+  // ...
+;
+
+// Override the pull scale
+@pull-scale:
+  '1' 0.25rem,
+  '2' 0.5rem,
+  // ...
+;
+
+// Override the padding scale
+@padding-scale:
+  '1' 0.25rem,
+  '2' 0.5rem,
+  // ...
+;
+```
+
+<h2 id="responsive">Responsive spacing utilities</h2>
+
+The spacing utilities can also be used with <a href="/responsive">responsive</a> prefixes:
+
+```html
+<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
+<div class="m-1 sm:m-2 md:m-3 lg:m-4"></div>
+<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
+```
+
+```less
+div {
+  .screen(lg, {
+    .mt-6;
+  });
+}
+```
+
diff --git a/docs/source/utilities/spacing/padding.md b/docs/source/utilities/spacing/padding.md
new file mode 100644
index 000000000..fcb06ce46
--- /dev/null
+++ b/docs/source/utilities/spacing/padding.md
@@ -0,0 +1,106 @@
+---
+extends: _layouts.markdown
+title: "Padding"
+---
+
+# Padding
+
+<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>
+
+<h2 id="usage">Using</h2>
+
+The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero.
+
+<div class="flex items-start mt-8 text-sm">
+    <div class="pr-12">
+        <div class="mb-3 text-dark-soft text-uppercase">Class</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">m</code> Margin</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">pull</code> Negative Margin</div>
+    </div>
+    <div class="pl-12 pr-12 border-l">
+        <div class="mb-3 text-dark-soft"><span class="text-uppercase">Position</span> <span class="text-dark-softer text-xs">(optional)</span></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">l</code> Left</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">x</code> Horizontal</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">y</code> Vertical</div>
+    </div>
+    <div class="pl-12 border-l">
+        <div class="mb-3 text-dark-soft text-uppercase">Space</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">1</code> 0.25rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">2</code> 0.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">3</code> 0.75rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">4</code> 1rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">6</code> 1.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">8</code> 2rem</div>
+    </div>
+</div>
+
+<h2 id="customizing">Customizing the spacing scale</h2>
+
+You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
+
+```less
+// The default sizing scale
+@sizing-scale:
+  '1' 0.25rem,
+  '2' 0.5rem,
+  '3' 0.75rem,
+  '4' 1rem,
+  '6' 1.5rem,
+  '8' 2rem,
+  '12' 3rem,
+  '16' 4rem,
+;
+```
+
+By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
+
+```less
+// Override the margin scale
+@margin-scale:
+  '1' 0.25rem,
+  '2' 0.5rem,
+  // ...
+;
+
+// Override the pull scale
+@pull-scale:
+  '1' 0.25rem,
+  '2' 0.5rem,
+  // ...
+;
+
+// Override the padding scale
+@padding-scale:
+  '1' 0.25rem,
+  '2' 0.5rem,
+  // ...
+;
+```
+
+<h2 id="responsive">Responsive spacing utilities</h2>
+
+The spacing utilities can also be used with <a href="/responsive">responsive</a> prefixes:
+
+```html
+<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
+<div class="m-1 sm:m-2 md:m-3 lg:m-4"></div>
+<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
+```
+
+```less
+div {
+  .screen(lg, {
+    .mt-6;
+  });
+}
+```
+
diff --git a/docs/source/utilities/text/alignment.md b/docs/source/utilities/text/alignment.md
new file mode 100644
index 000000000..968d8fb77
--- /dev/null
+++ b/docs/source/utilities/text/alignment.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Text Alignment"
+---
+
+# Text Alignment
+
+<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>
diff --git a/docs/source/utilities/text/color.md b/docs/source/utilities/text/color.md
new file mode 100644
index 000000000..46bd60e04
--- /dev/null
+++ b/docs/source/utilities/text/color.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Text Color"
+---
+
+# Text Color
+
+<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>
diff --git a/docs/source/utilities/text/fonts.md b/docs/source/utilities/text/fonts.md
new file mode 100644
index 000000000..218a9d21d
--- /dev/null
+++ b/docs/source/utilities/text/fonts.md
@@ -0,0 +1,34 @@
+---
+extends: _layouts.markdown
+title: "Font Families"
+---
+
+# Font Families
+
+<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>
+
+```html
+<div class="sans"></div>
+<div class="serif"></div>
+<div class="mono"></div>
+```
+
+```less
+div {
+  .sans;
+  .serif;
+  .mono;
+}
+```
+
+```less
+// Customize the font stack
+@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
+@font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+@font-family-base: @font-family-sans;
+```
diff --git a/docs/source/utilities/text/letter-spacing.md b/docs/source/utilities/text/letter-spacing.md
new file mode 100644
index 000000000..a880ab853
--- /dev/null
+++ b/docs/source/utilities/text/letter-spacing.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Letter Spacing"
+---
+
+# Letter Spacing
+
+<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>
diff --git a/docs/source/utilities/text/line-height.md b/docs/source/utilities/text/line-height.md
new file mode 100644
index 000000000..74c16f779
--- /dev/null
+++ b/docs/source/utilities/text/line-height.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Line Height"
+---
+
+# Line Height
+
+<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>
diff --git a/docs/source/utilities/text/sizing.md b/docs/source/utilities/text/sizing.md
new file mode 100644
index 000000000..edc9dde76
--- /dev/null
+++ b/docs/source/utilities/text/sizing.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Text Sizing"
+---
+
+# Text Sizing
+
+<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>
diff --git a/docs/source/utilities/text/style.md b/docs/source/utilities/text/style.md
new file mode 100644
index 000000000..60d3ca425
--- /dev/null
+++ b/docs/source/utilities/text/style.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Style & Decoration"
+---
+
+# Style & Decoration
+
+<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>
diff --git a/docs/source/utilities/text/weight.md b/docs/source/utilities/text/weight.md
new file mode 100644
index 000000000..1e6866e84
--- /dev/null
+++ b/docs/source/utilities/text/weight.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Font Weight"
+---
+
+# Font Weight
+
+<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>
diff --git a/docs/source/utilities/text/wrapping.md b/docs/source/utilities/text/wrapping.md
new file mode 100644
index 000000000..a3f4cd237
--- /dev/null
+++ b/docs/source/utilities/text/wrapping.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Text Wrapping"
+---
+
+# Text Wrapping
+
+<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>
diff --git a/docs/source/utilities/visibility.md b/docs/source/utilities/visibility.md
new file mode 100644
index 000000000..1e071003a
--- /dev/null
+++ b/docs/source/utilities/visibility.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Visibility"
+---
+
+# Visibility
+
+<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>
diff --git a/docs/source/utilities/z-index.md b/docs/source/utilities/z-index.md
new file mode 100644
index 000000000..18b8acb78
--- /dev/null
+++ b/docs/source/utilities/z-index.md
@@ -0,0 +1,12 @@
+---
+extends: _layouts.markdown
+title: "Z-Index"
+---
+
+# Z-Index
+
+<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>
diff --git a/docs/source/workflow/adding-new-utilities.md b/docs/source/workflow/adding-new-utilities.md
new file mode 100644
index 000000000..709ab86ce
--- /dev/null
+++ b/docs/source/workflow/adding-new-utilities.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.markdown
+title: "Adding New Utilities"
+---
+
+# Adding New Utilities
diff --git a/docs/source/workflow/customizing-tailwind.md b/docs/source/workflow/customizing-tailwind.md
new file mode 100644
index 000000000..5e7880dfc
--- /dev/null
+++ b/docs/source/workflow/customizing-tailwind.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.markdown
+title: "Customizing Tailwind"
+---
+
+# Customizing Tailwind
diff --git a/docs/source/workflow/extracting-components.md b/docs/source/workflow/extracting-components.md
new file mode 100644
index 000000000..f935eccb9
--- /dev/null
+++ b/docs/source/workflow/extracting-components.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.markdown
+title: "Working Utility-First"
+---
+
+# Working Utility-First
diff --git a/docs/source/workflow/responsive-design.md b/docs/source/workflow/responsive-design.md
new file mode 100644
index 000000000..5880e0b43
--- /dev/null
+++ b/docs/source/workflow/responsive-design.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.markdown
+title: "Responsive Design"
+---
+
+# Responsive Design
diff --git a/docs/source/workflow/working-utility-first.md b/docs/source/workflow/working-utility-first.md
new file mode 100644
index 000000000..9c2068bbc
--- /dev/null
+++ b/docs/source/workflow/working-utility-first.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.markdown
+title: "Extracting Components"
+---
+
+# Extracting Components
diff --git a/docs/source/z-index.md b/docs/source/z-index.md
deleted file mode 100644
index 99575277d..000000000
--- a/docs/source/z-index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-extends: _layouts.markdown
-title: "Z-Index"
----
-
-# Z-Index
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 9f3e4cfd2..f5e040f76 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -1,5 +1,10 @@
 module.exports = {
   "extend": {
+    "sizing": {
+      "width": {
+        "128": "32rem",
+      }
+    },
     "spacing": {
       "padding": {
         "12": "3rem",