Skip to content

Migrate responsive font weight utils to Tailwind

What does this MR do and why?

Related #456617 (closed)

This migrates gl-sm-font-weight-bold to the Tailwind variant sm:gl-font-bold.

FYI: there is also a gl-sm-font-weight-semibold utility used in GitLab, but it has no effect because it doesn't exist in gitlab-ui. While we can easily convert this to a Tailwind variant, I'll do this in a separate MR because it'll need a UX review to determine which variant they actually want, seeing that the currently applied semibold weight is not visible.

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

sm:gl-font-bold in app/assets/javascripts/work_items/components/work_item_title.vue

sm-gl-font-bold

How to set up and validate locally

The config/helpers/tailwind/css_in_js.js configuration lets us support Tailwind-incompatible legacy CSS utilities through the Tailwind generator. Those are the utilities we need to migrate to their Tailwind equivalent to make GitLab fully Tailwindy.

By showing the diff between this configuration before and after the migration we can validate the migration.

  1. Run following script to produce a diff for css-in-js config:
git checkout master
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
git add --force config/helpers/tailwind/css_in_js.js
git checkout tailwind/migrate-responsive-font-weight
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
git diff config/helpers/tailwind/css_in_js.js
  1. The responsive font weight utility is dropped
diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index 404ceec9b054..ff54ae482fc0 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 495 definitions need to be migrated to Tailwind.
+ * The following 494 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -588,7 +588,6 @@ module.exports = {
   '.reset-font-size': { 'font-size': 'inherit' },
   '.font-weight-normal': { 'font-weight': '400' },
   '.font-weight-bold': { 'font-weight': '600' },
-  '.sm-font-weight-bold': { '@media (min-width: 576px)': { 'font-weight': '600' } },
   '.line-height-1': { 'line-height': '1' },
   '.line-height-normal': { 'line-height': '1rem' },
   '.line-height-20': { 'line-height': '1.25rem' },
Edited by Lorenz van Herwaarden

Merge request reports