Skip to content

Migrate `gl-reset-bg` to Tailwind

Paul Gascou-Vaillancourt requested to merge 456618-reset-bg-tailwind into master

What does this MR do and why?

Migrate gl-reset-bg to Tailwind

Migrates the gl-reset-bg CSS util to its Tailwind equivalent configured as gl-bg-inherit.

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

Before After
Screenshot_2024-05-17_at_2.48.17_PM Screenshot_2024-05-17_at_2.44.06_PM Screenshot_2024-05-17_at_2.44.29_PM

CSS-in-Js diff

diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index f4f758ebfdeb..ef2f5ccff9d5 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 574 definitions need to be migrated to Tailwind.
+ * The following 572 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -36,8 +36,6 @@ module.exports = {
   '.bg-transparent\\!': { 'background-color': 'transparent !important' },
   '.hover-bg-transparent\\!': { '&:hover': { 'background-color': 'transparent !important' } },
   '.bg-white\\!': { 'background-color': 'var(--white, #fff) !important' },
-  '.reset-bg': { 'background-color': 'inherit' },
-  '.reset-bg\\!': { 'background-color': 'inherit !important' },
   '.bg-gray-10\\!': { 'background-color': 'var(--gray-10, #fbfafd) !important' },
   '.focus-bg-gray-50': { '&:focus': { 'background-color': 'var(--gray-50, #ececef)' } },
   '.hover-bg-gray-50': { '&:hover': { 'background-color': 'var(--gray-50, #ececef)' } },

Related to #456618

Edited by Paul Gascou-Vaillancourt

Merge request reports