Replace gl-line-clamp with the Tailwind equivalent

This enables the gl-line-clamp Tailwind plugin and
adds the gl-whitespace-normal class to match the
GitLab-UI utility class

Changelog: changed

app/assets/javascripts/invite_members/components/invite_modal_base.vue

@@ -341,7 +341,7 @@ export default {
               <div :class="{ 'gl-font-weight-bold': item.memberRoleId }">{{ item.text }}</div>
               <div
                 v-if="item.description"
-                class="gl-text-gray-700 gl-font-sm gl-pt-1 gl-line-clamp-2"
+                class="gl-text-gray-700 gl-font-sm gl-pt-1 gl-line-clamp-2 gl-whitespace-normal"
               >
                 {{ item.description }}
               </div>

app/assets/javascripts/members/components/table/max_role.vue

@@ -134,7 +134,10 @@ export default {
         <div data-testid="access-level-link" :class="{ 'gl-font-weight-bold': item.memberRoleId }">
           {{ item.text }}
         </div>
-        <div v-if="item.description" class="gl-text-gray-700 gl-font-sm gl-pt-1 gl-line-clamp-2">
+        <div
+          v-if="item.description"
+          class="gl-text-gray-700 gl-font-sm gl-pt-1 gl-line-clamp-2 gl-whitespace-normal"
+        >
           {{ item.description }}
         </div>
       </template>

app/assets/javascripts/repository/components/commit_info.vue

@@ -94,7 +94,7 @@ export default {
             v-safe-html:[$options.safeHtmlConfig]="commit.titleHtml"
             :href="commit.webPath"
             :class="{ 'gl-italic': !commit.message }"
-            class="commit-row-message item-title gl-line-clamp-1 !gl-break-all"
+            class="commit-row-message item-title gl-line-clamp-1 gl-whitespace-normal !gl-break-all"
           />
           <gl-button
             v-if="commit.descriptionHtml"

app/assets/stylesheets/page_bundles/projects.scss

@@ -559,6 +559,6 @@
 }
 
 .projects-list .description p {
-  @include gl-line-clamp-2;
+  @apply gl-line-clamp-2 gl-whitespace-normal;
   margin-bottom: 0;
 }

config/tailwind.config.js

@@ -65,10 +65,6 @@ module.exports = {
      */
     backgroundImage: false,
     /*
-    Our lineClamp also sets white-space: normal, which tailwind doesn't do, maybe we are okay?
-     */
-    lineClamp: false,
-    /*
     outline-none in tailwind is 2px solid transparent, we have outline: none
 
     I assume that tailwind has it's reasons, and we probably could enable it

scripts/frontend/lib/tailwind_migration.mjs

@@ -46,6 +46,13 @@ export const mismatchAllowList = [
   '.border-l\\!',
   '.border-r\\!',
   '.border-t\\!',
+   // Tailwind's line-clamp utils don't set `white-space: normal`, while our custom utils did.
+   // We have added `gl-whitespace-normal` wherever line-clamp utils were being used, so these
+   // mismatches can be ignored.
+   '.line-clamp-1',
+   '.line-clamp-2',
+   '.line-clamp-3',
+   
 ];
 
 export function loadCSSFromFile(filePath) {