Migrate line-height utility to tailwind

What does this MR do and why?

Related #456642 (closed)

Related #456593 (closed)

Migrate line-height utility to tailwind

This migrates:

• gl-line-height-0 -> gl-leading-0
• gl-line-height-1 -> gl-leading-1
• gl-line-height-ratio-1000 -> gl-leading-1
• gl-line-height-normal -> gl-leading-normal
• gl-line-height-20 -> gl-leading-20
• gl-line-height-24 -> gl-leading-24
• gl-line-height-28 -> gl-leading-28
• gl-line-height-32 -> gl-leading-32
• gl-line-height-36 -> gl-leading-36
• gl-line-height-42 -> gl-leading-42

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

gl-line-height-normal migration to gl-leading-normal

gl-line-height-20! migration to !gl-leading-20

How to set up and validate locally

The config/helpers/tailwind/css_in_js.js configuration lets us support Tailwind-incompatible legacy CSS utilities through the Tailwind generator. Those are the utilities we need to migrate to their Tailwind equivalent to make GitLab fully Tailwindy.

By showing the diff between this configuration before and after the migration we can validate the migration.

1. Run following script to produce a diff for css-in-js config:

git checkout master
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
git add --force config/helpers/tailwind/css_in_js.js
git checkout tailwind/migrate-line-height
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
git diff config/helpers/tailwind/css_in_js.js

2. Most line height utils are dropped except for gl-line-height-1, gl-line-height-normal, gl-line-height-20, and gl-line-height-36 which are still used in gitlab-ui.

diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index 059f737c8923..2263d9d087a3 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 547 definitions need to be migrated to Tailwind.
+ * The following 538 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -679,19 +679,10 @@ module.exports = {
   '.font-weight-bold': { 'font-weight': '600' },
   '.font-weight-bold\\!': { 'font-weight': '600 !important' },
   '.sm-font-weight-bold': { '@media (min-width: 576px)': { 'font-weight': '600' } },
-  '.line-height-0': { 'line-height': '0' },
   '.line-height-1': { 'line-height': '1' },
-  '.line-height-ratio-1000': { 'line-height': '1' },
   '.line-height-normal': { 'line-height': '1rem' },
-  '.line-height-normal\\!': { 'line-height': '1rem !important' },
   '.line-height-20': { 'line-height': '1.25rem' },
-  '.line-height-20\\!': { 'line-height': '1.25rem !important' },
-  '.line-height-24': { 'line-height': '1.5rem' },
-  '.line-height-28': { 'line-height': '1.75rem' },
-  '.line-height-28\\!': { 'line-height': '1.75rem !important' },
-  '.line-height-32': { 'line-height': '2rem' },
   '.line-height-36': { 'line-height': '2.25rem' },
-  '.line-height-42': { 'line-height': '2.625rem' },
   '.vertical-align-top': { 'vertical-align': 'top' },
   '.vertical-align-bottom': { 'vertical-align': 'bottom' },
   '.vertical-align-text-bottom': { 'vertical-align': 'text-bottom' },