diff --git a/docs/source/_assets/less/base.less b/docs/source/_assets/less/base.less
index d3e9975cc..1cdee3d8d 100644
--- a/docs/source/_assets/less/base.less
+++ b/docs/source/_assets/less/base.less
@@ -23,15 +23,15 @@ html {
 }
 
 body {
-  @apply .sans;
+  @apply .font-sans;
   @apply .text-base;
-  @apply .text-regular;
+  @apply .font-normal;
   @apply .text-slate-darker;
   line-height: 1.5;
 }
 
 pre, code {
-  @apply .mono;
+  @apply .font-mono;
 }
 
 img {
@@ -43,7 +43,7 @@ a {
   text-decoration: none;
 
   &:hover {
-    @apply .text-underline;
+    @apply .underline;
   }
 }
 
diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less
index 1007e8db8..ae43bed71 100644
--- a/docs/source/_assets/less/markdown.less
+++ b/docs/source/_assets/less/markdown.less
@@ -32,16 +32,16 @@
     @apply .leading-none;
     @apply .wrap-none;
     @apply .text-pink;
-    @apply .mono;
+    @apply .font-mono;
     vertical-align: middle;
   }
 
   > pre, pre& {
-    @apply .mono;
+    @apply .font-mono;
   }
 
   > blockquote, blockquote& {
-    @apply .text-em;
+    @apply .italic;
     @apply .text-slate;
     @apply .text-sm;
   }
@@ -50,7 +50,7 @@
     @apply .mb-4;
     @apply .leading-none;
     @apply .text-slate-darker;
-    @apply .text-bold;
+    @apply .font-bold;
     @apply .text-3xl;
   }
 
@@ -59,7 +59,7 @@
     @apply .mb-8;
     @apply .text-slate-darker;
     @apply .leading-none;
-    @apply .text-bold;
+    @apply .font-bold;
     @apply .text-xl;
   }
 
@@ -68,7 +68,7 @@
     @apply .mb-8;
     @apply .text-slate-darker;
     @apply .leading-none;
-    @apply .text-medium;
+    @apply .font-semibold;
     @apply .text-lg;
   }
 
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 691679f52..299c657f4 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -22,7 +22,7 @@
                     </svg>
                 </div>
                 <div>
-                    <a class="text-medium text-slate-light" href="https://github.com/adamwathan/tailwindcss">GitHub</a>
+                    <a class="font-semibold text-slate-light" href="https://github.com/adamwathan/tailwindcss">GitHub</a>
                 </div>
             </div>
         </header>
@@ -31,127 +31,127 @@
                 <div class="w-full lg:w-1/4">
                     <nav class="py-4 text-base">
                         <div class="mb-8">
-                            <p class="mb-4 text-slate-light text-uppercase tracking-wide text-medium text-sm">Introduction</p>
+                            <p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Introduction</p>
                             <ul>
                                 <li class="mb-2"><a class="text-slate" href="{{ $page->baseUrl }}/what-is-tailwind">What is Tailwind?</a></li>
                             </ul>
                         </div>
                         <div class="mb-8">
-                            <p class="mb-4 text-slate-light text-uppercase tracking-wide text-medium text-sm">Getting Started</p>
+                            <p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Getting Started</p>
                             <ul>
                                 <li class="mb-2"><a class="text-slate" href="{{ $page->baseUrl }}/installation">Installation</a></li>
                                 <li class="mb-2">
-                                    <a class="{{ $page->active('/configuration') ? 'text-slate-darker text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/configuration">
+                                    <a class="{{ $page->active('/configuration') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/configuration">
                                         Configuration
                                     </a>
                                 </li>
                                 <li class="mb-2">
-                                    <a class="{{ $page->active('/color-palette') ? 'text-slate-darker text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
+                                    <a class="{{ $page->active('/color-palette') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
                                         Color Palette
                                     </a>
                                 </li>
                                 <li class="mb-2">
-                                    <a class="{{ $page->active('/responsive-design') ? 'text-slate-darker text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
+                                    <a class="{{ $page->active('/responsive-design') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
                                         Responsive Design
                                     </a>
                                 </li>
                                 <li class="mb-2">
-                                    <a class="{{ $page->active('/adding-new-utilities') ? 'text-slate-darker text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
+                                    <a class="{{ $page->active('/adding-new-utilities') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
                                         Adding New Utilities
                                     </a>
                                 </li>
                                 <li class="mb-2">
-                                    <a class="{{ $page->active('/extracting-components') ? 'text-slate-darker text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
+                                    <a class="{{ $page->active('/extracting-components') ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
                                         Extracting Components
                                     </a>
                                 </li>
                             </ul>
                         </div>
                         <div class="mt-8">
-                            <p class="mb-4 text-slate-light text-uppercase tracking-wide text-medium text-sm">Styles</p>
+                            <p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Styles</p>
                             <ul class="mb-8">
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-slate-darker text-medium' : 'text-slate' }}">Base</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-slate-darker text-medium' : 'text-slate' }}">Alignment</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Base</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Alignment</a></li>
                                 <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-slate-darker text-medium' : 'text-slate' }}">Backgrounds</a>
+                                    <a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Backgrounds</a>
                                     <ul class="pl-4 {{ $page->active('/backgrounds/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-slate-darker text-medium' : 'text-slate' }}">Color</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker text-medium' : 'text-slate' }}">Position</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker text-medium' : 'text-slate' }}">Size</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Color</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Position</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Size</a></li>
                                     </ul>
                                 </li>
                                 <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-slate-darker text-medium' : 'text-slate' }}">Borders</a>
+                                    <a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Borders</a>
                                     <ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-slate-darker text-medium' : 'text-slate' }}">Base</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker text-medium' : 'text-slate' }}">Color</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker text-medium' : 'text-slate' }}">Style</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker text-medium' : 'text-slate' }}">Radius</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Base</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Color</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Style</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Radius</a></li>
                                     </ul>
                                 </li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/buttons') ? 'text-slate-darker text-medium' : 'text-slate' }}">Buttons</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container') ? 'text-slate-darker text-medium' : 'text-slate' }}">Container</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display') ? 'text-slate-darker text-medium' : 'text-slate' }}">Display</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/flexbox" class="{{ $page->active('/flexbox') ? 'text-slate-darker text-medium' : 'text-slate' }}">Flexbox</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/floats') ? 'text-slate-darker text-medium' : 'text-slate' }}">Floats</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/forms') ? 'text-slate-darker text-medium' : 'text-slate' }}">Forms</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/grid') ? 'text-slate-darker text-medium' : 'text-slate' }}">Grid</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/buttons') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Buttons</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Container</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Display</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/flexbox" class="{{ $page->active('/flexbox') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Flexbox</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/floats') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Floats</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/forms') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Forms</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/grid') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Grid</a></li>
                                 <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-slate-darker text-medium' : 'text-slate' }}">Interactivity</a>
+                                    <a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Interactivity</a>
                                     <ul class="pl-4 {{ $page->active('/interactivity/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-slate-darker text-medium' : 'text-slate' }}">Cursor</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/resize') ? 'text-slate-darker text-medium' : 'text-slate' }}">Resize</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-slate-darker text-medium' : 'text-slate' }}">Pointer Events</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-slate-darker text-medium' : 'text-slate' }}">User Select</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Cursor</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/resize') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Resize</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Pointer Events</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-slate-darker font-semibold' : 'text-slate' }}">User Select</a></li>
                                     </ul>
                                 </li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/lists" class="{{ $page->active('/lists') ? 'text-slate-darker text-medium' : 'text-slate' }}">Lists</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker text-medium' : 'text-slate' }}">Opacity</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker text-medium' : 'text-slate' }}">Overflow</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker text-medium' : 'text-slate' }}">Positioning</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker text-medium' : 'text-slate' }}">Shadows</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/lists" class="{{ $page->active('/lists') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Lists</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Opacity</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Overflow</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Positioning</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Shadows</a></li>
                                 <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-slate-darker text-medium' : 'text-slate' }}">Sizing</a>
+                                    <a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Sizing</a>
                                     <ul class="pl-4 {{ $page->active('/sizing/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-slate-darker text-medium' : 'text-slate' }}">Width</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-slate-darker text-medium' : 'text-slate' }}">Min-Width</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-slate-darker text-medium' : 'text-slate' }}">Max-Width</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-slate-darker text-medium' : 'text-slate' }}">Height</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-slate-darker text-medium' : 'text-slate' }}">Min-Height</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-slate-darker text-medium' : 'text-slate' }}">Max-Height</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Width</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Min-Width</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Max-Width</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Height</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Min-Height</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Max-Height</a></li>
                                     </ul>
                                 </li>
                                 <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-slate-darker text-medium' : 'text-slate' }}">Spacing</a>
+                                    <a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Spacing</a>
                                     <ul class="pl-4 {{ $page->active('/spacing/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-slate-darker text-medium' : 'text-slate' }}">Padding</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker text-medium' : 'text-slate' }}">Margin</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-slate-darker text-medium' : 'text-slate' }}">Negative Margin</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Padding</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Margin</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Negative Margin</a></li>
                                     </ul>
                                 </li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-slate-darker text-medium' : 'text-slate' }}">SVG</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-slate-darker font-semibold' : 'text-slate' }}">SVG</a></li>
                                 <li class="mb-2">
-                                    <a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-slate-darker text-medium' : 'text-slate' }}">Typography</a>
+                                    <a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Typography</a>
                                     <ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-slate-darker text-medium' : 'text-slate' }}">Fonts</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker text-medium' : 'text-slate' }}">Color</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker text-medium' : 'text-slate' }}">Sizing</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker text-medium' : 'text-slate' }}">Weight</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-slate-darker text-medium' : 'text-slate' }}">Line Height</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-slate-darker text-medium' : 'text-slate' }}">Letter Spacing</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-slate-darker text-medium' : 'text-slate' }}">Wrapping</a></li>
-                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker text-medium' : 'text-slate' }}">Style &amp; Decoration</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Fonts</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Color</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Sizing</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Weight</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Line Height</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Letter Spacing</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Wrapping</a></li>
+                                        <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Style &amp; Decoration</a></li>
                                     </ul>
                                 </li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/visibility') ? 'text-slate-darker text-medium' : 'text-slate' }}">Visibility</a></li>
-                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker text-medium' : 'text-slate' }}">Z-Index</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/visibility') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Visibility</a></li>
+                                <li class="mb-2"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker font-semibold' : 'text-slate' }}">Z-Index</a></li>
                             </ul>
                         </div>
                         <div class="mb-8">
-                            <p class="mb-4 text-slate-light text-uppercase tracking-wide text-medium text-sm">Examples</p>
+                            <p class="mb-4 text-slate-light uppercase tracking-wide font-semibold text-sm">Examples</p>
                             <ul>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/examples/alerts' ? 'text-slate-darker text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
-                                <li class="mb-2"><a class="{{ $page->getUrl() === '/examples/cards' ? 'text-slate-darker text-medium' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
+                                <li class="mb-2"><a class="{{ $page->getUrl() === '/examples/alerts' ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
+                                <li class="mb-2"><a class="{{ $page->getUrl() === '/examples/cards' ? 'text-slate-darker font-semibold' : 'text-slate' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
                             </ul>
                         </div>
                     </nav>
diff --git a/docs/source/examples/alerts.blade.md b/docs/source/examples/alerts.blade.md
index a613556fa..9cacbc141 100644
--- a/docs/source/examples/alerts.blade.md
+++ b/docs/source/examples/alerts.blade.md
@@ -26,7 +26,7 @@ Here's a bunch of examples:
 
 @component('_partials.code-sample', ['lang' => 'html'])
 <div class="bg-orange-lighter border-l-4 border-orange text-orange-dark p-4">
-  <p class="text-bold">Be Warned</p>
+  <p class="font-bold">Be Warned</p>
   <p>Something not ideal might be happening.</p>
 </div>
 @endcomponent
@@ -37,7 +37,7 @@ Here's a bunch of examples:
 
 @component('_partials.code-sample', ['lang' => 'html'])
 <div>
-  <div class="bg-red text-white text-bold rounded-t px-4 py-2">
+  <div class="bg-red text-white font-bold rounded-t px-4 py-2">
     Danger
   </div>
   <div class="border border-t-0 border-red-light rounded-b bg-red-lighter px-4 py-3 text-red">
@@ -51,7 +51,7 @@ Here's a bunch of examples:
 ### Solid
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="flex items-center bg-blue text-white text-sm text-bold px-4 py-3">
+<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3">
   <svg class="h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
   <p>
     Something happened that you should know about.
@@ -68,7 +68,7 @@ Here's a bunch of examples:
   <div class="flex">
     <svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
     <div>
-      <p class="text-medium">Our privacy policy has changed</p>
+      <p class="font-semibold">Our privacy policy has changed</p>
       <p class="text-sm">Make sure you know how these changes affect you.</p>
     </div>
   </div>
@@ -81,7 +81,7 @@ Here's a bunch of examples:
 
 @component('_partials.code-sample', ['lang' => 'html'])
 <div class="bg-blue-lighter border-t border-b border-blue text-blue px-4 py-3">
-  <p class="text-bold">Informational message</p>
+  <p class="font-bold">Informational message</p>
   <p class="text-sm">Some additional text to explain said message.</p>
 </div>
 @endcomponent
diff --git a/docs/source/examples/cards.blade.md b/docs/source/examples/cards.blade.md
index a43dd0794..557ba5ff3 100644
--- a/docs/source/examples/cards.blade.md
+++ b/docs/source/examples/cards.blade.md
@@ -17,9 +17,9 @@ We don't ship alert components because every app has it's own visual style, but
             </p>
         </div>
         <div class="px-6 py-4">
-            <span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm text-medium text-slate mr-2">#photography</span>
-            <span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm text-medium text-slate mr-2">#travel</span>
-            <span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm text-medium text-slate">#winter</span>
+            <span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
+            <span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
+            <span class="inline-block bg-smoke-light rounded-pill px-3 py-1 text-sm font-semibold text-slate">#winter</span>
         </div>
     </div>
 </div>
diff --git a/docs/source/styles/borders/base.md b/docs/source/styles/borders/base.md
index c45f217d2..73a14187a 100644
--- a/docs/source/styles/borders/base.md
+++ b/docs/source/styles/borders/base.md
@@ -17,24 +17,24 @@ Add borders to any element using the `.border{-side?}{-width?}` syntax. For exam
 
 <div class="flex items-start mt-8 text-sm leading-none">
     <div class="pr-12">
-        <div class="mb-3 text-slate text-uppercase">Class</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">border</code></div>
+        <div class="mb-3 text-slate uppercase">Class</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">border</code></div>
     </div>
     <div class="pl-12 pr-12 border-l">
-        <div class="mb-3 text-slate"><span class="text-uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 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 class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
     </div>
     <div class="pl-12 border-l">
-        <div class="mb-3 text-slate"><span class="text-uppercase">Width</span> <span class="text-slate-light text-xs">(optional)</span></div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">0</code> 0px</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 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 class="mb-3 text-slate"><span class="uppercase">Width</span> <span class="text-slate-light text-xs">(optional)</span></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 2px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 4px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>
     </div>
 </div>
 
diff --git a/docs/source/styles/buttons.blade.md b/docs/source/styles/buttons.blade.md
index a6a62481e..372a98d4e 100644
--- a/docs/source/styles/buttons.blade.md
+++ b/docs/source/styles/buttons.blade.md
@@ -14,13 +14,13 @@ Here's a bunch of examples:
 ### Simple
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
     Button
 </button>
 
 @slot('code')
 <!-- Using utilities: -->
-<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
     Button
 </button>
 
@@ -31,7 +31,7 @@ Here's a bunch of examples:
 
 <style>
   .btn {
-    @apply&nbsp;.text-bold .py-2 .px-4 .rounded;
+    @apply&nbsp;.font-bold .py-2 .px-4 .rounded;
   }
   .btn-blue {
     @apply&nbsp;.bg-blue .text-white;
@@ -48,7 +48,7 @@ Here's a bunch of examples:
 ### Pill
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded-pill">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded-pill">
     Button
 </button>
 @endcomponent
@@ -58,7 +58,7 @@ Here's a bunch of examples:
 ### Outline
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-transparent hover:bg-blue text-blue-dark text-medium hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
+<button class="bg-transparent hover:bg-blue text-blue-dark font-semibold hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
     Button
 </button>
 @endcomponent
@@ -68,7 +68,7 @@ Here's a bunch of examples:
 ### Bordered
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 border border-blue-darker rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border border-blue-darker rounded">
     Button
 </button>
 @endcomponent
@@ -78,7 +78,7 @@ Here's a bunch of examples:
 ### Disabled
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue text-white text-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
+<button class="bg-blue text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
     Button
 </button>
 @endcomponent
@@ -88,7 +88,7 @@ Here's a bunch of examples:
 ### 3D
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue-darker rounded">
+<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue-darker rounded">
     Button
 </button>
 @endcomponent
@@ -98,7 +98,7 @@ Here's a bunch of examples:
 ### Elevated
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-white hover:bg-smoke-lighter text-slate-dark text-medium py-2 px-4 border border-slate-lighter rounded shadow">
+<button class="bg-white hover:bg-smoke-lighter text-slate-dark font-semibold py-2 px-4 border border-slate-lighter rounded shadow">
     Button
 </button>
 @endcomponent
@@ -109,10 +109,10 @@ Here's a bunch of examples:
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <div class="inline-flex">
-    <button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded-l">
+    <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded-l">
         Prev
     </button>
-    <button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded-r">
+    <button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded-r">
         Next
     </button>
 </div>
@@ -123,7 +123,7 @@ Here's a bunch of examples:
 ### w/Icon
 
 @component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
-<button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded inline-flex items-center">
+<button class="bg-smoke hover:bg-smoke-dark text-slate-dark font-bold py-2 px-4 rounded inline-flex items-center">
     <svg class="h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
     <span>Download</span>
 </button>
diff --git a/docs/source/styles/grid.md b/docs/source/styles/grid.md
index c54862c9d..0a2a11c2a 100644
--- a/docs/source/styles/grid.md
+++ b/docs/source/styles/grid.md
@@ -20,7 +20,7 @@ Documentation around things like:
 
 Basic grid example:
 
-<div class="bg-smoke-light text-medium text-sm mb-6">
+<div class="bg-smoke-light font-semibold text-sm mb-6">
     <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/3">
@@ -43,7 +43,7 @@ Basic grid example:
 
 Columns don't need to fill a row:
 
-<div class="bg-smoke-light text-medium text-sm mb-6">
+<div class="bg-smoke-light font-semibold text-sm mb-6">
     <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/4">
@@ -67,7 +67,7 @@ Columns don't need to fill a row:
 
 Columns can be different widths:
 
-<div class="bg-smoke-light text-medium text-sm mb-6">
+<div class="bg-smoke-light font-semibold text-sm mb-6">
     <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/4">
@@ -91,7 +91,7 @@ Columns can be different widths:
 
 Rows can overflow and wrap:
 
-<div class="bg-smoke-light text-medium text-sm mb-6">
+<div class="bg-smoke-light font-semibold text-sm mb-6">
     <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/3">
@@ -124,7 +124,7 @@ Rows can overflow and wrap:
 
 Columns can have gutters:
 
-<div class="bg-smoke-light text-medium text-sm mb-6">
+<div class="bg-smoke-light font-semibold text-sm mb-6">
     <div class="text-slate p-4 leading-none">.flex.flex-wrap.-mx-4</div>
     <div class="flex flex-wrap -mx-4">
         <div class="w-full md:w-1/3 px-4">
@@ -154,7 +154,7 @@ Columns can have gutters:
 
 Column widths can be automatic:
 
-<div class="bg-smoke-light text-medium text-sm mb-6">
+<div class="bg-smoke-light font-semibold text-sm mb-6">
     <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
     <div class="flex flex-wrap">
         <div class="w-1/4 md:flex-1 md:w-auto">
@@ -197,7 +197,7 @@ Column widths can be automatic:
 
 Fixed width columns are still respected even if a smaller screen has auto column widths:
 
-<div class="bg-smoke-light text-medium text-sm mb-6">
+<div class="bg-smoke-light font-semibold text-sm mb-6">
     <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
     <div class="flex flex-wrap">
         <div class="flex-fill md:w-1/6 md:flex-none">
@@ -241,7 +241,7 @@ Fixed width columns are still respected even if a smaller screen has auto column
 
 Use margin auto utilities to accomplish offsets:
 
-<div class="bg-smoke-light text-medium text-sm mb-6">
+<div class="bg-smoke-light font-semibold text-sm mb-6">
     <div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/3 md:ml-auto">
diff --git a/docs/source/styles/spacing/margin.md b/docs/source/styles/spacing/margin.md
index 7692903f2..f6de45ff4 100644
--- a/docs/source/styles/spacing/margin.md
+++ b/docs/source/styles/spacing/margin.md
@@ -17,29 +17,29 @@ The syntax below is combined to create a system for padding and margins. For exa
 
 <div class="flex items-start mt-8 text-sm">
     <div class="pr-12">
-        <div class="mb-3 text-slate 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 class="mb-3 text-slate uppercase">Class</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pull</code> Negative Margin</div>
     </div>
     <div class="pl-12 pr-12 border-l">
-        <div class="mb-3 text-slate"><span class="text-uppercase">Position</span> <span class="text-slate-light 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 class="mb-3 text-slate"><span class="uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
     </div>
     <div class="pl-12 border-l">
-        <div class="mb-3 text-slate 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 class="mb-3 text-slate uppercase">Space</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
     </div>
 </div>
 
diff --git a/docs/source/styles/spacing/negative-margin.md b/docs/source/styles/spacing/negative-margin.md
index 7f09e342f..140df9f0f 100644
--- a/docs/source/styles/spacing/negative-margin.md
+++ b/docs/source/styles/spacing/negative-margin.md
@@ -17,29 +17,29 @@ The syntax below is combined to create a system for padding and margins. For exa
 
 <div class="flex items-start mt-8 text-sm">
     <div class="pr-12">
-        <div class="mb-3 text-slate 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 class="mb-3 text-slate uppercase">Class</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pull</code> Negative Margin</div>
     </div>
     <div class="pl-12 pr-12 border-l">
-        <div class="mb-3 text-slate"><span class="text-uppercase">Position</span> <span class="text-slate-light 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 class="mb-3 text-slate"><span class="uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
     </div>
     <div class="pl-12 border-l">
-        <div class="mb-3 text-slate 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 class="mb-3 text-slate uppercase">Space</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
     </div>
 </div>
 
diff --git a/docs/source/styles/spacing/padding.md b/docs/source/styles/spacing/padding.md
index 16d672889..549551a30 100644
--- a/docs/source/styles/spacing/padding.md
+++ b/docs/source/styles/spacing/padding.md
@@ -17,29 +17,29 @@ The syntax below is combined to create a system for padding and margins. For exa
 
 <div class="flex items-start mt-8 text-sm">
     <div class="pr-12">
-        <div class="mb-3 text-slate 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 class="mb-3 text-slate uppercase">Class</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pull</code> Negative Margin</div>
     </div>
     <div class="pl-12 pr-12 border-l">
-        <div class="mb-3 text-slate"><span class="text-uppercase">Position</span> <span class="text-slate-light 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 class="mb-3 text-slate"><span class="uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
     </div>
     <div class="pl-12 border-l">
-        <div class="mb-3 text-slate 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 class="mb-3 text-slate uppercase">Space</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
     </div>
 </div>
 
diff --git a/docs/source/styles/text/fonts.md b/docs/source/styles/text/fonts.md
index 218a9d21d..b1efd80be 100644
--- a/docs/source/styles/text/fonts.md
+++ b/docs/source/styles/text/fonts.md
@@ -12,16 +12,16 @@ title: "Font Families"
 </div>
 
 ```html
-<div class="sans"></div>
-<div class="serif"></div>
-<div class="mono"></div>
+<div class="font-sans"></div>
+<div class="font-serif"></div>
+<div class="font-mono"></div>
 ```
 
 ```less
 div {
-  .sans;
-  .serif;
-  .mono;
+  .font-sans;
+  .font-serif;
+  .font-mono;
 }
 ```
 
@@ -29,6 +29,6 @@ div {
 // 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-mono: Consolas, "Andale font-mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus font-mono L", Monaco, "Courier New", Courier, monospace;
 @font-family-base: @font-family-sans;
 ```