With https://gitlab.com/gitlab-org/gitlab/-/merge_requests/146750 and https://gitlab.com/gitlab-org/gitlab/-/merge_requests/148436, we have introduced a purged CSS-in-Js configuration in GitLab. This 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. As part of this epic, we'll plan the iterations necessary to eventually remove the CSS-in-Js configuration. The main steps are: * Migrate the GitLab codebase to fully Tailwindy utilities. * Migrate GitLab UI's codebase. * Remove the now-empty CSS-in-Js config and all the associated tooling from GitLab. ## Migration tips - Watch out for specificity issues. It is possible that the order of our utility classes may change. In most cases this won't be an issue but for some utility classes this could cause a visual regression. The main thing to look out for is when two utilities with the same CSS properties are applied to an element. For example [app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue#L243-244](https://gitlab.com/gitlab-org/gitlab/-/blob/ea98b0eb9d66ff907b6b4c6513c4651f09809973/app/assets/javascripts/work_items/components/shared/work_item_link_child_contents.vue#L243-244) - Be careful when doing a find and replace because you may inadvertently rename an `!important` utility. The Tailwind `!important` utilities have the `!` at the beginning so if you were to do a find and replace of `gl-display-flex` to `gl-flex` then `gl-display-flex!` would be changed to `gl-flex!` which is incorrect. You can use a Regex such as `gl-display-flex(?!!)` to get around this or migrate the `!important` utilities first. - You can use https://gitlab.com/-/snippets/3700897 to see the `config/helpers/tailwind/css_in_js.js` before and after the migration