Add `tailwindcss/no-arbitrary-value` CSS rule

Related to gitlab-org/gitlab#439096 (closed)

Since introducing Tailwind we have introduced about 190 usages of arbitrary values. While they can be useful and quick they should not be used for a few reasons:

• They are likely only needed on one page, but using them adds them to the global CSS bundle and increases the size of it. Page specific CSS should be used instead so that CSS is only included where it is needed.
• There may be a pre-defined CSS class that already exists. For example gl-max-w-[20%] in app/assets/javascripts/work_items/components/work_item_loading.vue#L47 is already pre-defined as gl-max-w-2/10
• They do not enforce our design system.

This MR does the following:

• Moves the Tailwind specific rules to a separate config so it is easier to include in other projects.
• Add the no-arbitrary-value rule from https://github.com/francoismassart/eslint-plugin-tailwindcss/

Local testing

1. Install yalc - https://github.com/wclr/yalc
2. Pull down this MR
3. Run yalc publish
4. In gitlab-org/gitlab project run yalc add @gitlab/eslint-plugin
5. Apply this patch (pbpaste | git apply)

diff --git a/app/assets/javascripts/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue b/app/assets/javascripts/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
index d12c38608c01..d5e624325061 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
@@ -21,6 +21,8 @@ export default {
   methods: {
     createEmptyConfigFile() {
       this.$emit('create-empty-config-file');
+      const size = 5;
+      const test = `gl-text-${size}`;
     },
   },
 };
@@ -54,7 +56,7 @@ export default {
           </gl-button>
         </template>
       </gl-card>
-      <gl-card class="gl-min-h-[128px] gl-w-[310px] gl-max-w-[500px]">
+      <gl-card class="gl-min-h-[128px] gl-w-[310px] gl-max-w-[500px] max-sm:gl-text-default">
         <template #header>
           <h2 class="gl-heading-scale-300 gl-mb-0">{{ s__('Pipelines|Write your own') }}</h2>
         </template>
diff --git a/eslint.config.mjs b/eslint.config.mjs
index fb2158234e71..0fc3169f8f55 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -209,6 +209,7 @@ export default [
     'plugin:no-jquery/slim',
     'plugin:no-jquery/deprecated-3.4',
     'plugin:@gitlab/jest',
+    'plugin:@gitlab/tailwind',
   ),
   ...compat.plugins('no-jquery'),
   // Native flat config plugins
@@ -295,12 +296,6 @@ export default [
 
       '@gitlab/vue-no-undef-apollo-properties': 'error',
 
-      // Tailwind rules
-      '@gitlab/tailwind-no-interpolation': 'error',
-      '@gitlab/vue-tailwind-no-interpolation': 'error',
-      '@gitlab/tailwind-no-max-width-media-queries': 'error',
-      '@gitlab/vue-tailwind-no-max-width-media-queries': 'error',
-
       // URL rules
       '@gitlab/no-hardcoded-urls': ['error', NO_HARDCODED_URLS_OPTIONS],
       '@gitlab/vue-no-hardcoded-urls': [

Run yarn lint:eslint app/assets/javascripts/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue --no-cache

Screenshots