diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index b27477649932aa1064a91a27d4b50066668335a5..c4696c44987c185950b7912d2614efc0459e2545 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -169,3 +169,18 @@ html {
     padding-right: 0;
   }
 }
+
+
+/*
+ * These are used by the `Tab width` user preference in
+ * `https://gitlab.com/-/profile/preferences`. The `css_class_for_user` method in 
+ * `lib/gitlab/tab_width.rb` is used to add one of these classes to the `body` element.
+*/
+
+@for $i from 1 through 12 {
+  #{'.tab-width-#{$i}'} {
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -moz-tab-size: $i;
+    tab-size: $i;
+  }
+}
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 1ed7bea30a47ee4f8ae1a3a04045e7b1f2302499..ee22753230b38e31f76e9efb37fe96868d537f4b 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -40,14 +40,6 @@ $type-scale: (
   }
 }
 
-@for $i from 1 through 12 {
-  #{'.tab-width-#{$i}'} {
-    /* stylelint-disable-next-line property-no-vendor-prefix */
-    -moz-tab-size: $i;
-    tab-size: $i;
-  }
-}
-
 // stylelint-disable-next-line gitlab/no-gl-class
 .gl-top-app-header {
   top: $calc-application-header-height;