Skip to content

[CSS utilities TG] Sizing > Migrate to Tailwind CSS

The following utilities need to be migrated to Tailwind CSS:

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.

Links

You may refer to the following Tailwind CSS documentation pages. Those should help in figuring out the naming convention the utils should follow. Keep in mind that we use a custom preset, meaning that our Tailwind equivalents should follow the same structure as what is outlined in Tailwind docs, but the actual names and applied values might differ. For example, all our utilities use the gl- prefix, we use a custom color palette and spacing scale, etc.

Edited by Peter Hegman