Skip to content

Migrate `gl-row-gap-*` to Tailwind equivalent

What does this MR do and why?

Related to #456632 (closed)

The CSS utils task group is in the process of migrating legacy CSS utilities to the Tailwind equivalent. This MR migrates the following legacy utils to their Tailwind equivalent:

  • .gl-row-gap-2
  • .gl-row-gap-3
  • .gl-row-gap-5
  • .gl-row-gap-6

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 578 definitions need to be migrated to Tailwind.
+ * The following 574 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -535,10 +535,6 @@ module.exports = {
   '.mx-n4': { 'margin-left': '-0.75rem', 'margin-right': '-0.75rem' },
   '.mx-n5': { 'margin-left': '-1rem', 'margin-right': '-1rem' },
   '.sm-gap-3': { '@media (min-width: 576px)': { gap: '0.5rem' } },
-  '.row-gap-2': { 'row-gap': '0.25rem' },
-  '.row-gap-3': { 'row-gap': '0.5rem' },
-  '.row-gap-5': { 'row-gap': '1rem' },
-  '.row-gap-6': { 'row-gap': '1.5rem' },
   '.sm-ml-3': { '@media (min-width: 576px)': { 'margin-left': '0.5rem' } },
   '.sm-ml-3\\!': { '@media (min-width: 576px)': { 'margin-left': '0.5rem !important' } },
   '.sm-ml-5': { '@media (min-width: 576px)': { 'margin-left': '1rem' } },

See comments below for Tailwind autocomplete comparison and spot check

Edited by Peter Hegman

Merge request reports