Migrate important width utilities to Tailwind equivalent
requested to merge 456586-css-utilities-tg-important-utilities-sizing-migrate-to-tailwind-css into master
What does this MR do and why?
Related to #456586 (closed)
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