Update `@gitlab/ui` to v86.0.1

What does this MR do and why?

Integration MR for gitlab-ui!4338 (merged)

GitLab UI now comes with the custom Tailwind config we had iterated on in the GitLab project. As part of this upgrade, we can cleanup the Tailwind config here and simply rely on the preset.

This also does a last minute migration to avoid errors related to the bg-none util.

Tailwind CSS diff

Only the ordering seems to have changed:

diff --git a/app/assets/builds/tailwind.css b/app/assets/builds/tailwind.css
index 71b49dd7b903..2446a8f4e7c4 100644
--- a/app/assets/builds/tailwind.css
+++ b/app/assets/builds/tailwind.css
@@ -148,62 +148,58 @@
   -moz-appearance: textfield;
 }
 
-/*
-    Type scale: adding our gl-heading shorthands.
-     */
-
-.gl-heading-display {
-  font-size: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem);
-  line-height: 1.125;
+.gl-heading-5 {
   font-weight: 600;
-  letter-spacing: -0.01em;
   margin-top: 0;
-  margin-bottom: 1.5rem;
-}
-
-.gl-heading-1 {
-  font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem);
+  font-size: 0.875rem;
+  letter-spacing: inherit;
   line-height: 1.25;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  margin-top: 0;
   margin-bottom: 1rem;
 }
 
-.gl-heading-2 {
-  font-size: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem);
-  line-height: 1.25;
+.gl-heading-4 {
   font-weight: 600;
-  letter-spacing: -0.01em;
   margin-top: 0;
+  font-size: 1rem;
+  letter-spacing: inherit;
+  line-height: 1.25;
   margin-bottom: 1rem;
 }
 
 .gl-heading-3 {
+  font-weight: 600;
+  margin-top: 0;
   font-size: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem);
+  letter-spacing: inherit;
   line-height: 1.25;
+  margin-bottom: 1rem;
+}
+
+.gl-heading-2 {
   font-weight: 600;
-  letter-spacing: inherit;
   margin-top: 0;
+  font-size: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem);
+  letter-spacing: -0.01em;
+  line-height: 1.25;
   margin-bottom: 1rem;
 }
 
-.gl-heading-4 {
-  font-size: 1rem;
-  line-height: 1.25;
+.gl-heading-1 {
   font-weight: 600;
-  letter-spacing: inherit;
   margin-top: 0;
+  font-size: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem);
+  letter-spacing: -0.01em;
+  line-height: 1.25;
   margin-bottom: 1rem;
 }
 
-.gl-heading-5 {
-  font-size: 0.875rem;
-  line-height: 1.25;
+.gl-heading-display {
   font-weight: 600;
-  letter-spacing: inherit;
   margin-top: 0;
-  margin-bottom: 1rem;
+  font-size: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem);
+  letter-spacing: -0.01em;
+  line-height: 1.125;
+  margin-bottom: 1.5rem;
 }
 
 .gl-sr-only {
@@ -2300,6 +2296,10 @@
   background-color: var(--white, #fff);
 }
 
+.gl-bg-none {
+  background-image: none;
+}
+
 .\!gl-fill-blue-500 {
   fill: var(--blue-500, #1f75cb) !important;
 }
@@ -5303,14 +5303,6 @@
   z-index: 9999 !important;
 }
 
-/*
-Components layer:
-https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes
-
-The components layer will be rendered _before_ the utilities,
-so that utilities can overwrite values
-*/
-
 @media not all and (min-width: 768px) {
   .max-md\:gl-border-t {
     border-top-width: 1px;
@@ -5729,4 +5721,3 @@ so that utilities can overwrite values
     padding-right: 1.5rem;
   }
 }
-

gl-bg-none might be included because a GitLab UI component uses it. We should probably migrate it to gl-bg-transparent.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

No visual change.