Migrate percentage utils to Tailwind equivalent

What does this MR do and why?

Related to #456629 (closed)

The CSS utils task group is in the process of migrating legacy CSS utilities to the Tailwind equivalent. This MR migrates the percentage sizing utilities to the Tailwind equivalent. By default Tailwind has these percentage utilities. For our codebase we also need percentage utilities that are on a scale of 8, 10, and 20. This MR also updates the tailwind.confing.js file to make these utilities available. In the future we will backport these config changes to GitLab UI.

I realize there is some overlap between some of the utility classes, for example gl-w-1/4 and gl-w-5/20. I debated if we want this overlap but leaned towards keeping the overlap for a couple reasons:

1. The percentage utilities are heavily used for column width on tables. It is more intuitive to assign each column a width in the same scale. For example you could have a table that has the following column widths gl-w-5/20, gl-w-4/20, gl-w-2/20, gl-w-3/20, gl-w-6/20 then all you need to do is make sure that the numerators add up to 20. If instead you had to use gl-w-1/4, gl-w-1/5, gl-w-1/10, gl-w-3/10, gl-w-3/5 it would be much harder to calculate the total percentage.
2. The amount of overlap is small in the big scheme of things. It should only result in a handful of duplicate utilities that does not have a measurable affect on our total CSS bundle.
3. This is the same approach Tailwind takes.

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

Diff showing removal of legacy utils

gl-w-40p is used in src/components/base/token_selector/token_selector.vue#L418 so that won't be removed until we migrate in GitLab UI.

--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 609 definitions need to be migrated to Tailwind.
+ * The following 596 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -382,20 +382,7 @@ module.exports = {
   '.w-6\\!': { width: '1.5rem !important' },
   '.w-11\\!': { width: '4rem !important' },
   '.w-31\\!': { width: '15.5rem !important' },
-  '.w-eighth': { width: '12.5%' },
-  '.w-5p': { width: '5%' },
-  '.w-10p': { width: '10%' },
-  '.w-15p': { width: '15%' },
-  '.w-20p': { width: '20%' },
-  '.w-30p': { width: '30%' },
   '.w-40p': { width: '40%' },
-  '.w-quarter': { width: '25%' },
-  '.w-quarter\\!': { width: '25% !important' },
-  '.w-half': { width: '50%' },
-  '.w-half\\!': { width: '50% !important' },
-  '.w-70p': { width: '70%' },
-  '.w-85p': { width: '85%' },
-  '.w-90p': { width: '90%' },
   '.w-full\\!': { width: '100% !important' },
   '.w-grid-size-30': { width: '15rem' },
   '.md-w-full': { '@media (min-width: 768px)': { width: '100%' } },

I spot checked a few instances below:

Admin jobs

Before	After

Project artifacts

Before	After

How to set up and validate locally

Admin jobs

Go to /admin/jobs

Project artifacts

Go to a project -> Build -> Artifacts