Add more hover docs

docs/source/docs/background-color.blade.md

@@ -39,7 +39,6 @@ title: "Backgrounds"
     </table>
 </div>
 
-
 ## Hover
 
 In addition to the standard responsive variations, background colors also come in `hover:` variations that apply the given background color on hover.
@@ -53,5 +52,5 @@ In addition to the standard responsive variations, background colors also come i
 Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
 
 ```html
-<button class="bg-blue hover:bg-purple md:bg-orange md:hover:bg-red">Button</button>
+<button class="... md:bg-orange md:hover:bg-red ...">Button</button>
 ```

docs/source/docs/border-color.blade.md

@@ -38,3 +38,20 @@ title: "Border Color"
         </tbody>
     </table>
 </div>
+
+
+## Hover
+
+In addition to the standard responsive variations, border colors also come in `hover:` variations that apply the given border color on hover.
+
+@component('_partials.code-sample', ['class' => 'text-center'])
+<button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold rounded">
+    Button
+</button>
+@endcomponent
+
+Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
+
+```html
+<button class="... md:border-blue md:hover:border-red ...">Button</button>
+```

docs/source/docs/border-width.blade.md

@@ -3,10 +3,10 @@ extends: _layouts.documentation
 title: "Border Width"
 ---
 
-# Border Width & Position
+# Border Width
 
 <div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the width and position of an element's borders.
+    Utilities for controlling the width an element's borders.
 </div>
 
 @include('_partials.feature-badges', [

docs/source/docs/text-color.blade.md

@@ -38,3 +38,19 @@ title: "Text Color"
         </tbody>
     </table>
 </div>
+
+## Hover
+
+In addition to the standard responsive variations, text colors also come in `hover:` variations that apply the given text color on hover.
+
+@component('_partials.code-sample', ['class' => 'text-center'])
+<button class="text-blue-dark hover:text-red-dark border-2 border-blue hover:border-red bg-transparent py-2 px-4 font-semibold rounded">
+    Button
+</button>
+@endcomponent
+
+Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
+
+```html
+<button class="... md:text-blue md:hover:text-red ...">Button</button>
+```

docs/source/docs/text-style.blade.md

@@ -87,7 +87,7 @@ title: "Style & Decoration"
                 <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font smoothing of an element to antialiased.</td>
             </tr>
             <tr>
-                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.subpixel-antialiased</td>
+                <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.subpixel-antialiased</td>
                 <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
                     -webkit-font-smoothing: auto;<br>
                     -moz-osx-font-smoothing: auto;
@@ -97,3 +97,17 @@ title: "Style & Decoration"
         </tbody>
     </table>
 </div>
+
+## Hover
+
+In addition to the standard responsive variations, text style utilties also come in `hover:` variations that apply the given text style on hover.
+
+@component('_partials.code-sample', ['class' => 'text-center'])
+<a href="#" class="no-underline hover:underline text-blue text-lg">Link</a>
+@endcomponent
+
+Hover utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `hover:` prefix.
+
+```html
+<a href="#" class="... md:no-underline md:hover:underline ...">Link</a>
+```