Migrate negative margin utils to Tailwind in CI
What does this MR do and why?
Migrate negative margin utils to Tailwind in CI
Migrates legacy negative margin CSS utils to their Tailwind equivalents in CI components.
The following utils are being migrated in this MR:
- gl-mb-n1
- gl-mb-n2
- gl-mb-n3
- gl-mb-n4
- gl-mb-n5
- gl-mb-n8
- gl-ml-n2
- gl-ml-n3
- gl-ml-n4
- gl-mr-n3
- gl-mt-n2
- gl-mt-n3
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
Here's a single screenshot to showcase one instance:
| CI variable drawer |
|---|
![]() |
How to set up and validate locally
-
Navigate to a project's Settings > CI/CD > Variables.
-
Click on
Add variable. -
Here's how this affects the CSS-in-JS:
diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js index 9f56524930ca..2a8bd08d7b03 100644 --- a/config/helpers/tailwind/css_in_js.js +++ b/config/helpers/tailwind/css_in_js.js @@ -1,5 +1,5 @@ /** - * The following 620 definitions need to be migrated to Tailwind. + * The following 618 definitions need to be migrated to Tailwind. * Let's do this! 🚀 */ module.exports = { @@ -526,9 +526,7 @@ module.exports = { '.mb-n3\\!': { 'margin-bottom': '-0.5rem !important' }, '.mb-4\\!': { 'margin-bottom': '0.75rem !important' }, '.mb-5\\!': { 'margin-bottom': '1rem !important' }, - '.mb-n5': { 'margin-bottom': '-1rem' }, '.mb-6\\!': { 'margin-bottom': '1.5rem !important' }, - '.mb-n8': { 'margin-bottom': '-2.5rem' }, '.sm-ml-auto': { '@media (min-width: 576px)': { 'margin-left': 'auto' } }, '.ml-0\\!': { 'margin-left': '0 !important' }, '.ml-n1': { 'margin-left': '-0.125rem' },
Related to #456630 (closed)
Edited by Savas Vedova
