Avoid name collision, update to demo thickness hover

Author: mdo

scss/_utilities.scss

@@ -785,7 +785,7 @@ $utilities: map.merge(
     ),
     "underline-thickness": (
       property: text-decoration-thickness,
-      class: underline,
+      class: underline-thickness,
       state: hover,
       values: (
         1: 1px,

site/src/content/docs/utilities/text-decoration.mdx

@@ -58,17 +58,17 @@ Change the underline's opacity. Requires adding `.underline-{color}` to first se
 Change the thickness of the underline.
 
 <Example code={`<p><a href="#">Default link</a></p>
-<p><a class="underline-1" href="#">Thickness 1 link</a></p>
-<p><a class="underline-2" href="#">Thickness 2 link</a></p>
-<p><a class="underline-3" href="#">Thickness 3 link</a></p>
-<p><a class="underline-4" href="#">Thickness 4 link</a></p>
-<p><a class="underline-5" href="#">Thickness 5 link</a></p>`} />
+<p><a class="underline-thickness-1" href="#">Thickness 1 link</a></p>
+<p><a class="underline-thickness-2" href="#">Thickness 2 link</a></p>
+<p><a class="underline-thickness-3" href="#">Thickness 3 link</a></p>
+<p><a class="underline-thickness-4" href="#">Thickness 4 link</a></p>
+<p><a class="underline-thickness-5" href="#">Thickness 5 link</a></p>`} />
 
 ### Hover variants
 
 The `.underline-offset`, `.underline-{N}`, and `.underline-thickness` utilities include `:hover` variants by default. Mix and match to create unique link styles.
 
-<Example code={`<a class="underline-offset-2 underline-offset-3-hover underline-10 underline-50-hover" href="#">
+<Example code={`<a class="underline-offset-2 underline-offset-3-hover underline-10 underline-50-hover underline-thickness-2-hover" href="#">
     Underline with offset and opacity changes on hover
   </a>`} />