Skip to content

Migrate negative margin-x utils to Tailwind

What does this MR do and why?

Migrate negative margin-x utils to Tailwind

Migrates gl-mx-n* utils to their -gl-mx-* Tailwind equivalents.

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

Groups list
Screenshot_2024-05-29_at_6.02.42_PM

CSS-in-Js diff

diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index 397076c0d1cb..aa02195fdc5f 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 544 definitions need to be migrated to Tailwind.
+ * The following 541 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -498,12 +498,9 @@ module.exports = {
   '.mx-n1': { 'margin-left': '-0.125rem', 'margin-right': '-0.125rem' },
   '.my-n2': { 'margin-top': '-0.25rem', 'margin-bottom': '-0.25rem' },
   '.my-n2\\!': { 'margin-top': '-0.25rem !important', 'margin-bottom': '-0.25rem !important' },
-  '.mx-n2': { 'margin-left': '-0.25rem', 'margin-right': '-0.25rem' },
   '.my-n3': { 'margin-top': '-0.5rem', 'margin-bottom': '-0.5rem' },
   '.my-n3\\!': { 'margin-top': '-0.5rem !important', 'margin-bottom': '-0.5rem !important' },
-  '.mx-n3': { 'margin-left': '-0.5rem', 'margin-right': '-0.5rem' },
   '.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' } },
   '.sm-ml-3': { '@media (min-width: 576px)': { 'margin-left': '0.5rem' } },
   '.sm-ml-3\\!': { '@media (min-width: 576px)': { 'margin-left': '0.5rem !important' } },

Related to #456630 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports