[CSS utilities TG] Miscellaneous > Migrate to Tailwind CSS
The following utilities need to be migrated to Tailwind CSS:
-
.gl-sr-only-focusable
-
.gl-spin
-
.gl-animate-skeleton-loader
-
.gl-reset-bg
: !153430 (merged) -
.gl-clearfix
-
.gl-reset-color
-
.gl-deprecated-top-66vh
-
.gl-order-n1
: !153416 -
.gl-grid-tpl-rows-auto
: !153413 -
.gl-gap-x-3 > * + *
: #456618 (comment 1910542897) -
.gl-gap-x-5 > * + *
: #456618 (comment 1910542897) -
.gl-gap-y-3 > * + *
: #456618 (comment 1910542897) -
.gl-fill-current-color
: !153417 (merged) -
.gl-overflow-break-word
-
.gl-str-truncated
-
.gl-reset-line-height
: !153415
Migration steps
- If this issue has important/stateful/responsive siblings and they are simple enough, consider migrating them all at once.
- Ensure the util aligns with Tailwind's naming conventions
- Migrate all usages of the util to the Tailwind equivalent. It might be used in HAML, Ruby, Javascript and Vue files. This might warrant several MRs.
- If our Tailwind configuration doesn't seem to support a replacement, we might need to add the missing values to GitLab's
tailwind.config.js
. In doubt, reach out to the task group in#tg_css_utils
(internal). - If you did add new values to the configuration, please add a
TODO:
along with it if it needs to be backported to GitLab UI eventually.
Edited by Paul Gascou-Vaillancourt