Add tailwindcss/no-arbitrary-value ESLint rule
What does this MR do and why?
Related to #439096 (closed)
Follow-up from gitlab-org/frontend/eslint-plugin!164 (merged) to upgrade @gitlab/eslint-plugin to include the tailwindcss/no-arbitrary-value rule.
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 asgl-max-w-2/10 - They do not enforce our design system.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Peter Hegman