Replace and remove CSS Classes text-1, text-2, and text-4

Implementation Guide

Problem to solve

As a developer, I want to clean up a legacy CSS file. Specifically the CSS Class mentioned in the issue title. The file utilities.scss existed before we created GitLab's own Utility classes coming from gitlab/ui.

Proposal

• Check out all the findings using the global search:
  • text-1: 2x in Vue files
  • text-2: 1x in Vue files
  • text-4: 2x in Vue files
• Execute one of the following alternatives:
  • When it is really a util class and a Tailwind CSS equivalent exists: Replace & Remove:
    • Replace all CSS Class usages with a modern Utility CSS Class applying the identical style
    • Remove the CSS Class in utilities.scss
  • When the CSS Class is actually needed: Move & Rename:
    • Move the CSS Class definition to a project based CSS file
    • If the CSS Class started with gl-, rename it. This prefix is reserved for gitlab/ui Util CSS Classes.

Further details

• Check out the SCSS style guide for more information about the deprecated utilities.scss file and the new Utility Classes based on Tailwind CSS.
• Check out the Tailwind Defaults. Be careful that wegitlab/ui` has another spacing scale than the official one from TailwindCSS

For any questions, consider asking/tagging members of the CSS Utilities Task Group