no-unnecessary-arbitrary-value overwrites intentional arbitrary values with design system classes

[CMWR421]

Describe the bug
The no-unnecessary-arbitrary-value rule incorrectly flags custom utility classes defined in the Tailwind config as unnecessary arbitrary values, suggesting they be replaced with arbitrary values like h-[48px]. This happens even though the custom classes are properly defined in the Tailwind preset/config.

To Reproduce

1. Define custom utilities in your Tailwind config:

// tailwind.config.js
module.exports = {
 theme: {
   height: {
     "ds-icon-3xl": "48px",
     "ds-icon-xl": "32px",
     // ... more custom values
   },
   width: {
     "ds-icon-3xl": "48px",
     "ds-icon-xl": "32px",
     // ... more custom values
   }
 }
}

2. Use these custom utilities in your code:

<div className="h-[48px] w-[48px]" />

3. The linter flags these arbitrary values and suggests replacing them with:

<div className="h-ds-icon-3xl w-ds-icon-3xl" />

---

Expected behavior
The rule may allow arbitrary values when they are intentionally different from our design system values, or when we explicitly want to use pixel values instead of semantic names.

---

Environment
eslint-plugin-tailwindcss: 3.17.4

---

Additional context
While generally it's good practice to use design system tokens, there are valid cases where we want to use arbitrary values. The current behavior of the rule makes it difficult to use arbitrary values even in legitimate cases.

---

Workaround

const tailwind = require('eslint-plugin-tailwindcss');

/** @type {import('eslint').Linter.Config[]} */
module.exports = [
  ...tailwind.configs['flat/recommended'],
  {
    rules: {
      'tailwindcss/no-unnecessary-arbitrary-value': [
        'error',
        {
          config: {}, // We do not want this rule to take custom tailwind utilities into consideration.
        },
      ],
    },
  },
];