We'd like to replace Bootstrap Util CSS Classes with the GitLab UI equivalents. The GitLab Ui Utility CSS Classes use TailwindCSS under the hood. One idea is to reuse the [migration script](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/bin/migrate_custom_utils_to_tw.mjs) of Legacy Custom Util CSS Classes to the Tailwind Equivalents for Bootstrap Utility CSS Classes as well. The challenge is, that we cannot use the `gl-` prefix to look for CSS classes. Refer to this [GitlLab Code Scanner](https://gitlab-org.gitlab.io/frontend/playground/gitlab-code-scanner/?search=check_id%20co%20%22bootstrap%22&groupBy=matched-text) and @peterhegman's [Bootstrap Util CSS Tracker](https://peterhegman.gitlab.io/bootstrap-to-tailwind-css-migration-tracker/#/) to find Bootstrap Util CSS Classes in `gitlab`. This list might not be complete. Check out the file for the [Tailwind Equivalents](https://gitlab.com/peterhegman/bootstrap-to-tailwind-css-migration-tracker/-/blob/main/tailwind-equivalents.json?ref_type=heads). Task of this epic is also to check `!important` keywords. Gitlab UI Util Classes which should apply `!important` start with an exclamation mark, e.g. `!gl-mb-5`. Bootstrap Util CSS Classes set `!important` by default. However, in some cases, the `!important` might not be necessary. @peterhegman pinpointed it to the following statements when we might not want to add a important TailwindCSS equivalent: - Element is not a GitLab UI component - Element does not have any custom CSS classes on it (e.g. commit-title) - Element is not nested in another element with custom CSS classes on it Otherwise we probably will need to use an !important util or manually check there is no visual change. ----- Related issues of the ~"group::design system": - https://gitlab.com/gitlab-org/gitlab/-/issues/479198 - https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2821