diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 9c83de0ce..79c95ed9a 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -47,27 +47,27 @@
                             <ul>
                                 <li class="mb-3"><a class="{{ $page->active('/installation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
                                 <li class="mb-3">
-                                    <a class="{{ $page->active('/workflow/configuration') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/configuration">
+                                    <a class="{{ $page->active('/configuration') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/configuration">
                                         Configuration
                                     </a>
                                 </li>
                                 <li class="mb-3">
-                                    <a class="{{ $page->active('/workflow/color-palette') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
+                                    <a class="{{ $page->active('/color-palette') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/color-palette">
                                         Color Palette
                                     </a>
                                 </li>
                                 <li class="mb-3">
-                                    <a class="{{ $page->active('/workflow/responsive-design') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
+                                    <a class="{{ $page->active('/responsive-design') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/responsive-design">
                                         Responsive Design
                                     </a>
                                 </li>
                                 <li class="mb-3">
-                                    <a class="{{ $page->active('/workflow/adding-new-utilities') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
+                                    <a class="{{ $page->active('/adding-new-utilities') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/adding-new-utilities">
                                         Adding New Utilities
                                     </a>
                                 </li>
                                 <li class="mb-3">
-                                    <a class="{{ $page->active('/workflow/extracting-components') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
+                                    <a class="{{ $page->active('/extracting-components') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/extracting-components">
                                         Extracting Components
                                     </a>
                                 </li>
@@ -76,93 +76,93 @@
                         <div class="mt-8">
                             <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Styles</p>
                             <ul class="mb-8">
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Base</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/base" class="{{ $page->active('/base') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Base</a></li>
                                 <li class="mb-3">
-                                    <a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/styles/backgrounds/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
-                                    <ul class="pl-4 {{ $page->active('/styles/backgrounds/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Position</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Size</a></li>
+                                    <a href="{{ $page->baseUrl }}/background-color" class="block mb-2 {{ $page->active('/background-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
+                                    <ul class="pl-4 {{ $page->active('/background-') ? 'block' : 'hidden' }}">
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/background-color" class="{{ $page->active('/background-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/background-position" class="{{ $page->active('/background-position') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Position</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/background-size" class="{{ $page->active('/background-size') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Size</a></li>
                                     </ul>
                                 </li>
                                 <li class="mb-3">
-                                    <a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/styles/borders/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Borders</a>
-                                    <ul class="pl-4 {{ $page->active('/styles/borders/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Base</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Radius</a></li>
+                                    <a href="{{ $page->baseUrl }}/border-size" class="block mb-2 {{ $page->active('/border-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Borders</a>
+                                    <ul class="pl-4 {{ $page->active('/border-') ? 'block' : 'hidden' }}">
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/border-size" class="{{ $page->active('/border-size') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Size</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/border-color" class="{{ $page->active('/border-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/border-style" class="{{ $page->active('/border-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/border-radius" class="{{ $page->active('/border-radius') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Radius</a></li>
                                     </ul>
                                 </li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/styles/buttons') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Buttons</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/styles/container') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Container</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/styles/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/buttons" class="{{ $page->active('/buttons') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Buttons</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/container" class="{{ $page->active('/container') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Container</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/display" class="{{ $page->active('/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
                                 <li class="mb-3">
-                                    <a href="{{ $page->baseUrl }}/styles/flexbox/display" class="block mb-2 {{ $page->active('/styles/flexbox/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
-                                    <ul class="pl-4 {{ $page->active('/styles/flexbox/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/display" class="{{ $page->active('/styles/flexbox/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/direction" class="{{ $page->active('/styles/flexbox/direction') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Direction</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/wrapping" class="{{ $page->active('/styles/flexbox/wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/justify-content" class="{{ $page->active('/styles/flexbox/justify-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Justify Content</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/align-items" class="{{ $page->active('/styles/flexbox/align-items') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Items</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/align-content" class="{{ $page->active('/styles/flexbox/align-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Content</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/align-self" class="{{ $page->active('/styles/flexbox/align-self') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Self</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/flex-grow-shrink" class="{{ $page->active('/styles/flexbox/flex-grow-shrink') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flex, Grow, &amp; Shrink</a></li>
+                                    <a href="{{ $page->baseUrl }}/flexbox-display" class="block mb-2 {{ $page->active('/flexbox-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
+                                    <ul class="pl-4 {{ $page->active('/flexbox-') ? 'block' : 'hidden' }}">
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-display" class="{{ $page->active('/flexbox-display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-direction" class="{{ $page->active('/flexbox-direction') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Direction</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-wrapping" class="{{ $page->active('/flexbox-wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-justify-content" class="{{ $page->active('/flexbox-justify-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Justify Content</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-align-items" class="{{ $page->active('/flexbox-align-items') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Items</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-align-content" class="{{ $page->active('/flexbox-align-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Content</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-align-self" class="{{ $page->active('/flexbox-align-self') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Self</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/flexbox-flex-grow-shrink" class="{{ $page->active('/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 }}/styles/floats" class="{{ $page->active('/styles/floats') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Floats</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/styles/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Forms</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/styles/grid') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Grid</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/floats" class="{{ $page->active('/floats') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Floats</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/forms" class="{{ $page->active('/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Forms</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/grid" class="{{ $page->active('/grid') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Grid</a></li>
                                 <li class="mb-3">
-                                    <a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/styles/interactivity/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Interactivity</a>
-                                    <ul class="pl-4 {{ $page->active('/styles/interactivity/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/interactivity/cursor') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Cursor</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/interactivity/resize') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Resize</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/interactivity/pointer-events') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Pointer Events</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/interactivity/user-select') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">User Select</a></li>
+                                    <a href="{{ $page->baseUrl }}/cursor" class="block mb-2 {{ $page->active(['/cursor', '/resize', '/pointer-events', '/user-select']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Interactivity</a>
+                                    <ul class="pl-4 {{ $page->active(['/cursor', '/resize', '/pointer-events', '/user-select']) ? 'block' : 'hidden' }}">
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/cursor" class="{{ $page->active('/cursor') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Cursor</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/resize" class="{{ $page->active('/resize') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Resize</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Pointer Events</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/user-select" class="{{ $page->active('/user-select') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">User Select</a></li>
                                     </ul>
                                 </li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/lists" class="{{ $page->active('/styles/lists') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Lists</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/styles/opacity') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Opacity</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/styles/overflow') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Overflow</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/styles/positioning') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Positioning</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/styles/shadows') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Shadows</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/lists" class="{{ $page->active('/lists') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Lists</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Opacity</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Overflow</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Positioning</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Shadows</a></li>
                                 <li class="mb-3">
-                                    <a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/styles/sizing/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a>
-                                    <ul class="pl-4 {{ $page->active('/styles/sizing/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Width</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Width</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Height</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Height</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Height</a></li>
+                                    <a href="{{ $page->baseUrl }}/width" class="block mb-2 {{ $page->active(['/width', '/min-width', '/max-width', '/height', '/min-height', '/max-height']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a>
+                                    <ul class="pl-4 {{ $page->active(['/width', '/min-width', '/max-width', '/height', '/min-height', '/max-height']) ? 'block' : 'hidden' }}">
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/width" class="{{ $page->active('/width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/min-width" class="{{ $page->active('/min-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Width</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/max-width" class="{{ $page->active('/max-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Width</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/height" class="{{ $page->active('/height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Height</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/min-height" class="{{ $page->active('/min-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Height</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/max-height" class="{{ $page->active('/max-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Height</a></li>
                                     </ul>
                                 </li>
                                 <li class="mb-3">
-                                    <a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/styles/spacing/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a>
-                                    <ul class="pl-4 {{ $page->active('/styles/spacing/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Padding</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Margin</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Negative Margin</a></li>
+                                    <a href="{{ $page->baseUrl }}/padding" class="block mb-2 {{ $page->active(['/padding', '/margin', '/negative-margin']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a>
+                                    <ul class="pl-4 {{ $page->active(['/padding', '/margin', '/negative-margin']) ? 'block' : 'hidden' }}">
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/padding" class="{{ $page->active('/padding') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Padding</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/margin" class="{{ $page->active('/margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Margin</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/negative-margin" class="{{ $page->active('/negative-margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Negative Margin</a></li>
                                     </ul>
                                 </li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/styles/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/svg" class="{{ $page->active('/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
                                 <li class="mb-3">
-                                    <a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/styles/text/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
-                                    <ul class="pl-4 {{ $page->active('/styles/text/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Fonts</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Weight</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Line Height</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Letter Spacing</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
-                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style &amp; Decoration</a></li>
+                                    <a href="{{ $page->baseUrl }}/fonts" class="block mb-2 {{ $page->active(['/fonts', '/text-color', '/text-sizing', '/font-weight', '/leading', '/tracking', '/whitespace', '/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
+                                    <ul class="pl-4 {{ $page->active(['/fonts', '/text-color', '/text-sizing', '/font-weight', '/leading', '/tracking', '/whitespace', '/text-style']) ? 'block' : 'hidden' }}">
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/fonts" class="{{ $page->active('/fonts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Fonts</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/text-color" class="{{ $page->active('/text-color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/text-sizing" class="{{ $page->active('/text-sizing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/font-weight" class="{{ $page->active('/font-weight') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Weight</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/leading" class="{{ $page->active('/leading') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Leading</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/tracking" class="{{ $page->active('/tracking') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Tracking</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/whitespace" class="{{ $page->active('/whitespace') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Whitespace</a></li>
+                                        <li class="mb-3"><a href="{{ $page->baseUrl }}/text-style" class="{{ $page->active('/text-style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style &amp; Decoration</a></li>
                                     </ul>
                                 </li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/vertical-alignment" class="{{ $page->active('/styles/vertical-alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Vertical Alignment</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/styles/visibility') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Visibility</a></li>
-                                <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/styles/z-index') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Z-Index</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/vertical-alignment" class="{{ $page->active('/vertical-alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Vertical Alignment</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/visibility" class="{{ $page->active('/visibility') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Visibility</a></li>
+                                <li class="mb-3"><a href="{{ $page->baseUrl }}/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Z-Index</a></li>
                             </ul>
                         </div>
                         <div class="mb-8">
diff --git a/docs/source/workflow/adding-new-utilities.md b/docs/source/adding-new-utilities.blade.md
similarity index 100%
rename from docs/source/workflow/adding-new-utilities.md
rename to docs/source/adding-new-utilities.blade.md
diff --git a/docs/source/styles/backgrounds/color.md b/docs/source/background-color.blade.md
similarity index 100%
rename from docs/source/styles/backgrounds/color.md
rename to docs/source/background-color.blade.md
diff --git a/docs/source/styles/backgrounds/position.md b/docs/source/background-position.blade.md
similarity index 100%
rename from docs/source/styles/backgrounds/position.md
rename to docs/source/background-position.blade.md
diff --git a/docs/source/styles/backgrounds/size.md b/docs/source/background-size.blade.md
similarity index 100%
rename from docs/source/styles/backgrounds/size.md
rename to docs/source/background-size.blade.md
diff --git a/docs/source/styles/base.md b/docs/source/base.blade.md
similarity index 100%
rename from docs/source/styles/base.md
rename to docs/source/base.blade.md
diff --git a/docs/source/styles/borders/color.md b/docs/source/border-color.blade.md
similarity index 100%
rename from docs/source/styles/borders/color.md
rename to docs/source/border-color.blade.md
diff --git a/docs/source/styles/borders/radius.md b/docs/source/border-radius.blade.md
similarity index 100%
rename from docs/source/styles/borders/radius.md
rename to docs/source/border-radius.blade.md
diff --git a/docs/source/styles/borders/base.md b/docs/source/border-size.blade.md
similarity index 100%
rename from docs/source/styles/borders/base.md
rename to docs/source/border-size.blade.md
diff --git a/docs/source/styles/borders/style.md b/docs/source/border-style.blade.md
similarity index 100%
rename from docs/source/styles/borders/style.md
rename to docs/source/border-style.blade.md
diff --git a/docs/source/styles/buttons.blade.md b/docs/source/buttons.blade.md
similarity index 100%
rename from docs/source/styles/buttons.blade.md
rename to docs/source/buttons.blade.md
diff --git a/docs/source/workflow/color-palette.blade.md b/docs/source/color-palette.blade.md
similarity index 100%
rename from docs/source/workflow/color-palette.blade.md
rename to docs/source/color-palette.blade.md
diff --git a/docs/source/workflow/configuration.md b/docs/source/configuration.blade.md
similarity index 100%
rename from docs/source/workflow/configuration.md
rename to docs/source/configuration.blade.md
diff --git a/docs/source/styles/container.md b/docs/source/container.blade.md
similarity index 100%
rename from docs/source/styles/container.md
rename to docs/source/container.blade.md
diff --git a/docs/source/styles/interactivity/cursor.md b/docs/source/cursor.blade.md
similarity index 100%
rename from docs/source/styles/interactivity/cursor.md
rename to docs/source/cursor.blade.md
diff --git a/docs/source/styles/display.blade.md b/docs/source/display.blade.md
similarity index 100%
rename from docs/source/styles/display.blade.md
rename to docs/source/display.blade.md
diff --git a/docs/source/workflow/extracting-components.md b/docs/source/extracting-components.blade.md
similarity index 100%
rename from docs/source/workflow/extracting-components.md
rename to docs/source/extracting-components.blade.md
diff --git a/docs/source/styles/flexbox/align-content.blade.md b/docs/source/flexbox-align-content.blade.md
similarity index 100%
rename from docs/source/styles/flexbox/align-content.blade.md
rename to docs/source/flexbox-align-content.blade.md
diff --git a/docs/source/styles/flexbox/align-items.blade.md b/docs/source/flexbox-align-items.blade.md
similarity index 100%
rename from docs/source/styles/flexbox/align-items.blade.md
rename to docs/source/flexbox-align-items.blade.md
diff --git a/docs/source/styles/flexbox/align-self.blade.md b/docs/source/flexbox-align-self.blade.md
similarity index 100%
rename from docs/source/styles/flexbox/align-self.blade.md
rename to docs/source/flexbox-align-self.blade.md
diff --git a/docs/source/styles/flexbox/direction.blade.md b/docs/source/flexbox-direction.blade.md
similarity index 100%
rename from docs/source/styles/flexbox/direction.blade.md
rename to docs/source/flexbox-direction.blade.md
diff --git a/docs/source/styles/flexbox/display.blade.md b/docs/source/flexbox-display.blade.md
similarity index 100%
rename from docs/source/styles/flexbox/display.blade.md
rename to docs/source/flexbox-display.blade.md
diff --git a/docs/source/styles/flexbox/flex-grow-shrink.blade.md b/docs/source/flexbox-flex-grow-shrink.blade.md
similarity index 100%
rename from docs/source/styles/flexbox/flex-grow-shrink.blade.md
rename to docs/source/flexbox-flex-grow-shrink.blade.md
diff --git a/docs/source/styles/flexbox/justify-content.blade.md b/docs/source/flexbox-justify-content.blade.md
similarity index 100%
rename from docs/source/styles/flexbox/justify-content.blade.md
rename to docs/source/flexbox-justify-content.blade.md
diff --git a/docs/source/styles/flexbox/wrapping.blade.md b/docs/source/flexbox-wrapping.blade.md
similarity index 100%
rename from docs/source/styles/flexbox/wrapping.blade.md
rename to docs/source/flexbox-wrapping.blade.md
diff --git a/docs/source/styles/flexbox.blade.md b/docs/source/flexbox.blade.md
similarity index 100%
rename from docs/source/styles/flexbox.blade.md
rename to docs/source/flexbox.blade.md
diff --git a/docs/source/styles/floats.blade.md b/docs/source/floats.blade.md
similarity index 100%
rename from docs/source/styles/floats.blade.md
rename to docs/source/floats.blade.md
diff --git a/docs/source/styles/text/weight.md b/docs/source/font-weight.blade.md
similarity index 100%
rename from docs/source/styles/text/weight.md
rename to docs/source/font-weight.blade.md
diff --git a/docs/source/styles/text/fonts.md b/docs/source/fonts.blade.md
similarity index 100%
rename from docs/source/styles/text/fonts.md
rename to docs/source/fonts.blade.md
diff --git a/docs/source/styles/forms.blade.md b/docs/source/forms.blade.md
similarity index 100%
rename from docs/source/styles/forms.blade.md
rename to docs/source/forms.blade.md
diff --git a/docs/source/styles/grid.md b/docs/source/grid.blade.md
similarity index 100%
rename from docs/source/styles/grid.md
rename to docs/source/grid.blade.md
diff --git a/docs/source/styles/sizing/height.md b/docs/source/height.blade.md
similarity index 100%
rename from docs/source/styles/sizing/height.md
rename to docs/source/height.blade.md
diff --git a/docs/source/index.md b/docs/source/index.blade.md
similarity index 100%
rename from docs/source/index.md
rename to docs/source/index.blade.md
diff --git a/docs/source/installation.md b/docs/source/installation.blade.md
similarity index 100%
rename from docs/source/installation.md
rename to docs/source/installation.blade.md
diff --git a/docs/source/styles/text/line-height.md b/docs/source/leading.blade.md
similarity index 87%
rename from docs/source/styles/text/line-height.md
rename to docs/source/leading.blade.md
index 74c16f779..2cb311a8d 100644
--- a/docs/source/styles/text/line-height.md
+++ b/docs/source/leading.blade.md
@@ -1,9 +1,9 @@
 ---
 extends: _layouts.markdown
-title: "Line Height"
+title: "Leading"
 ---
 
-# Line Height
+# Leading
 
 <div class="subnav">
     <a class="subnav-link" href="#usage">Usage</a>
diff --git a/docs/source/styles/lists.md b/docs/source/lists.blade.md
similarity index 100%
rename from docs/source/styles/lists.md
rename to docs/source/lists.blade.md
diff --git a/docs/source/styles/spacing/margin.md b/docs/source/margin.blade.md
similarity index 100%
rename from docs/source/styles/spacing/margin.md
rename to docs/source/margin.blade.md
diff --git a/docs/source/styles/sizing/max-height.md b/docs/source/max-height.blade.md
similarity index 100%
rename from docs/source/styles/sizing/max-height.md
rename to docs/source/max-height.blade.md
diff --git a/docs/source/styles/sizing/max-width.md b/docs/source/max-width.blade.md
similarity index 100%
rename from docs/source/styles/sizing/max-width.md
rename to docs/source/max-width.blade.md
diff --git a/docs/source/styles/sizing/min-height.md b/docs/source/min-height.blade.md
similarity index 100%
rename from docs/source/styles/sizing/min-height.md
rename to docs/source/min-height.blade.md
diff --git a/docs/source/styles/sizing/min-width.md b/docs/source/min-width.blade.md
similarity index 100%
rename from docs/source/styles/sizing/min-width.md
rename to docs/source/min-width.blade.md
diff --git a/docs/source/styles/spacing/negative-margin.md b/docs/source/negative-margin.blade.md
similarity index 100%
rename from docs/source/styles/spacing/negative-margin.md
rename to docs/source/negative-margin.blade.md
diff --git a/docs/source/styles/opacity.blade.md b/docs/source/opacity.blade.md
similarity index 100%
rename from docs/source/styles/opacity.blade.md
rename to docs/source/opacity.blade.md
diff --git a/docs/source/styles/overflow.blade.md b/docs/source/overflow.blade.md
similarity index 100%
rename from docs/source/styles/overflow.blade.md
rename to docs/source/overflow.blade.md
diff --git a/docs/source/styles/spacing/padding.md b/docs/source/padding.blade.md
similarity index 100%
rename from docs/source/styles/spacing/padding.md
rename to docs/source/padding.blade.md
diff --git a/docs/source/styles/interactivity/pointer-events.md b/docs/source/pointer-events.blade.md
similarity index 100%
rename from docs/source/styles/interactivity/pointer-events.md
rename to docs/source/pointer-events.blade.md
diff --git a/docs/source/styles/positioning.blade.md b/docs/source/positioning.blade.md
similarity index 100%
rename from docs/source/styles/positioning.blade.md
rename to docs/source/positioning.blade.md
diff --git a/docs/source/styles/interactivity/resize.md b/docs/source/resize.blade.md
similarity index 100%
rename from docs/source/styles/interactivity/resize.md
rename to docs/source/resize.blade.md
diff --git a/docs/source/workflow/responsive-design.md b/docs/source/responsive-design.blade.md
similarity index 100%
rename from docs/source/workflow/responsive-design.md
rename to docs/source/responsive-design.blade.md
diff --git a/docs/source/styles/shadows.blade.md b/docs/source/shadows.blade.md
similarity index 100%
rename from docs/source/styles/shadows.blade.md
rename to docs/source/shadows.blade.md
diff --git a/docs/source/styles/visibility.md b/docs/source/styles/visibility.md
deleted file mode 100644
index d2d374bf8..000000000
--- a/docs/source/styles/visibility.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-extends: _layouts.markdown
-title: "Visibility"
----
-
-# Visibility
-
-
-<div class="text-xl text-slate-light">
-    Utilities for controlling how an element handles content that is too large for the container.
-</div>
-
-<div class="subnav">
-    <a class="subnav-link" href="#responsive">Responsive</a>
-</div>
-
-
-### Visible <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
-
-Use `.overflow-visible` to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.
-
-@component('_partials.code-sample')
-<div class="overflow-hidden h-24">
-    <div class="overflow-visible h-32 bg-smoke text-slate p-2">
-        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>
-@endslot
-@endcomponent
-
-### Auto
-
-Use `.overflow-auto` to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike `.overflow-scroll`, which always show scrollbars, this utility will only shown them if scrolling is necessary.
-
-@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.
-</div>
-@slot('code')
-<div class="overflow-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>
-@endslot
-@endcomponent
-
-### Hidden
-
-Use `.overflow-hidden` to clip any content within an element that overflows the bounds of that element.
-
-@component('_partials.code-sample')
-<div class="overflow-hidden h-32 bg-smoke text-slate p-2">
-    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>
-@endslot
-@endcomponent
-
-### Scroll horizontally
-
-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
-</div>
-
-@slot('code')
-<div class="overflow-x-scroll ...">QrLmmW69vMQD...</div>
-@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.
-</div>
-
-@slot('code')
-<div class="overflow-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>
-@endslot
-@endcomponent
-
-### Scroll in all directions
-
-Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems, like MacOS, hide unnecessary scrollbars regardless of this setting.
-
-@component('_partials.code-sample')
-<p class="text-sm text-slate-light mb-1">Scroll horizontally when content can't wrap</p>
-<div class="overflow-scroll bg-smoke text-slate p-2 mb-6">
-    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.
-</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!
-</div>
-@slot('code')
-<div class="overflow-scroll ...">QrLmmW69vMQD...</div>
-<div class="overflow-scroll h-32 ...">Lorem ipsum dolor sit amet...</div>
-<div class="overflow-scroll h-32 ...">Loremipsumdolorsitamet...</div>
-@endslot
-@endcomponent
-
-
-## Responsive
-
-To apply an overflow utility only at a specific breakpoint, add a `{breakpoint}:` 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.
-
-For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation.
-
-@component('_partials.responsive-code-sample')
-@slot('none')
-<div class="overflow-auto h-32 bg-smoke text-slate p-2">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
-
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
-</div>
-@endslot
-@slot('sm')
-<div class="overflow-visible h-32 bg-smoke text-slate p-2">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
-
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
-@endslot
-@slot('md')
-<div class="overflow-hidden h-32 bg-smoke text-slate p-2">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
-
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
-@endslot
-@slot('lg')
-<div class="overflow-x-scroll h-32 bg-smoke text-slate p-2">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
-
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
-@endslot
-@slot('xl')
-<div class="overflow-y-scroll h-32 bg-smoke text-slate p-2">
-    QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
-
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
-@endslot
-@slot('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...
-</div>
-@endslot
-@endcomponent
diff --git a/docs/source/styles/svg.md b/docs/source/svg.blade.md
similarity index 100%
rename from docs/source/styles/svg.md
rename to docs/source/svg.blade.md
diff --git a/docs/source/styles/text/color.md b/docs/source/text-color.blade.md
similarity index 100%
rename from docs/source/styles/text/color.md
rename to docs/source/text-color.blade.md
diff --git a/docs/source/styles/text/sizing.md b/docs/source/text-sizing.blade.md
similarity index 100%
rename from docs/source/styles/text/sizing.md
rename to docs/source/text-sizing.blade.md
diff --git a/docs/source/styles/text/style.md b/docs/source/text-style.blade.md
similarity index 100%
rename from docs/source/styles/text/style.md
rename to docs/source/text-style.blade.md
diff --git a/docs/source/styles/text/wrapping.md b/docs/source/tracking.blade.md
similarity index 86%
rename from docs/source/styles/text/wrapping.md
rename to docs/source/tracking.blade.md
index a3f4cd237..8752a49ac 100644
--- a/docs/source/styles/text/wrapping.md
+++ b/docs/source/tracking.blade.md
@@ -1,9 +1,9 @@
 ---
 extends: _layouts.markdown
-title: "Text Wrapping"
+title: "Tracking"
 ---
 
-# Text Wrapping
+# Tracking
 
 <div class="subnav">
     <a class="subnav-link" href="#usage">Usage</a>
diff --git a/docs/source/styles/interactivity/user-select.md b/docs/source/user-select.blade.md
similarity index 100%
rename from docs/source/styles/interactivity/user-select.md
rename to docs/source/user-select.blade.md
diff --git a/docs/source/styles/vertical-alignment.md b/docs/source/vertical-alignment.blade.md
similarity index 100%
rename from docs/source/styles/vertical-alignment.md
rename to docs/source/vertical-alignment.blade.md
diff --git a/docs/source/styles/visibility.blade.md b/docs/source/visibility.blade.md
similarity index 100%
rename from docs/source/styles/visibility.blade.md
rename to docs/source/visibility.blade.md
diff --git a/docs/source/what-is-tailwind.md b/docs/source/what-is-tailwind.blade.md
similarity index 100%
rename from docs/source/what-is-tailwind.md
rename to docs/source/what-is-tailwind.blade.md
diff --git a/docs/source/styles/text/letter-spacing.md b/docs/source/whitespace.blade.md
similarity index 85%
rename from docs/source/styles/text/letter-spacing.md
rename to docs/source/whitespace.blade.md
index a880ab853..910fa111c 100644
--- a/docs/source/styles/text/letter-spacing.md
+++ b/docs/source/whitespace.blade.md
@@ -1,9 +1,9 @@
 ---
 extends: _layouts.markdown
-title: "Letter Spacing"
+title: "Whitespace"
 ---
 
-# Letter Spacing
+# Whitespace
 
 <div class="subnav">
     <a class="subnav-link" href="#usage">Usage</a>
diff --git a/docs/source/styles/sizing/width.md b/docs/source/width.blade.md
similarity index 100%
rename from docs/source/styles/sizing/width.md
rename to docs/source/width.blade.md
diff --git a/docs/source/workflow/working-utility-first.md b/docs/source/working-utility-first.blade.md
similarity index 100%
rename from docs/source/workflow/working-utility-first.md
rename to docs/source/working-utility-first.blade.md
diff --git a/docs/source/styles/z-index.blade.md b/docs/source/z-index.blade.md
similarity index 100%
rename from docs/source/styles/z-index.blade.md
rename to docs/source/z-index.blade.md