Skip to content

Migrate important width utilities to Tailwind equivalent

What does this MR do and why?

Related to #456586

The CSS utils task group is in the process of migrating legacy CSS utilities to the Tailwind equivalent. This MR migrates the !important width CSS utility classes to the Tailwind equivalent. In Tailwind the ! goes at the beginning of the util instead of the end.

Migrates the following utils:

  • .gl-w-auto!
  • .gl-w-6!
  • .gl-w-11!
  • .gl-w-full!

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

gl-w-auto! and gl-w-31! are still used in GitLab UI so they won't be removed from css_in_js.js until we migrate them there.

--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 563 definitions need to be migrated to Tailwind.
+ * The following 560 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -372,13 +372,10 @@ module.exports = {
   '.overflow-wrap-anywhere': { 'overflow-wrap': 'anywhere' },
   '.overflow-visible\\!': { overflow: 'visible !important' },
   '.w-auto\\!': { width: 'auto !important' },
-  '.w-6\\!': { width: '1.5rem !important' },
-  '.w-11\\!': { width: '4rem !important' },
   '.w-31\\!': { width: '15.5rem !important' },
   '.w-10p': { width: '10%' },
   '.w-40p': { width: '40%' },
   '.w-90p': { width: '90%' },
-  '.w-full\\!': { width: '100% !important' },
   '.md-w-full': { '@media (min-width: 768px)': { width: '100%' } },
   '.h-auto\\!': { height: 'auto !important' },
   '.h-6\\!': { height: '1.5rem !important' },

See autocomplete screenshots in inline comments

Edited by Peter Hegman

Merge request reports