What's wrong
`tailwindcss/no-unnecessary-arbitrary-value` is supposed to auto-fix an
arbitrary value to an equivalent preset class when one exists (see its
docs: `m-[8px]` -> `m-2`). It works for integer multiples of the base
spacing unit but never fires for fractional ones, even though Tailwind
v4's dynamic spacing utilities (`p-3.25`, `p-3.5`, etc., computed via
`calc(var(--spacing) * n)`) fully support them.
Root cause, in `node_modules/eslint-plugin-tailwindcss/lib/index.mjs`
(v4.2.0), the spacing-candidate generator:
```js
const re = B / q; // px value ÷ base spacing unit (0.25rem = 4px)
Number.isInteger(re) && N.push(`${prefix}-${re}${suffix}`)
```
It only pushes a candidate when the ratio is a whole integer. Anything
landing on a quarter/half step is silently dropped, no fix, no
suggestion, just the bare "arbitrary value detected" error stays.
Repro
In `apps/app/src/app/app.html`, temporarily set:
- `class="p-[16px]"` (16 / 4 = 4, integer) -> `nx run app:lint --fix`
correctly rewrites to `class="p-4"`.
- `class="p-[14px]"` (14 / 4 = 3.5) -> no fix, no suggestion, rule stays
as a bare `tailwindcss/no-arbitrary-value` error.
- `class="p-[13px]"` (13 / 4 = 3.25) -> same as above.
- Writing `class="p-3.25"` directly passes lint clean (confirms it's a
valid Tailwind v4 utility the plugin just never proposes as a fix).
Why this matters here
We just wired up `tailwindcss/no-arbitrary-value` +
`tailwindcss/no-unnecessary-arbitrary-value` as `error` in
`eslint.config.ts` (see #11). Anyone who writes an off-scale pixel value
that happens to need a fractional multiplier gets a hard lint error with
no auto-fix and no suggested replacement, only the workaround of manually
computing `px / 4` and writing the dynamic class themselves.
Possible next steps
- Track/report upstream against `eslint-plugin-tailwindcss`
(francoismassart/eslint-plugin-tailwindcss) — its v4 support currently
lives on an `alpha/v4-basic-files` branch per the rule doc links, so
this may already be a known alpha-stage gap.
- No action needed in this repo's config; this is a plugin bug, not a
misconfiguration.
What's wrong
`tailwindcss/no-unnecessary-arbitrary-value` is supposed to auto-fix an
arbitrary value to an equivalent preset class when one exists (see its
docs: `m-[8px]` -> `m-2`). It works for integer multiples of the base
spacing unit but never fires for fractional ones, even though Tailwind
v4's dynamic spacing utilities (`p-3.25`, `p-3.5`, etc., computed via
`calc(var(--spacing) * n)`) fully support them.
Root cause, in `node_modules/eslint-plugin-tailwindcss/lib/index.mjs`
(v4.2.0), the spacing-candidate generator:
```js
const re = B / q; // px value ÷ base spacing unit (0.25rem = 4px)
Number.isInteger(re) && N.push(`${prefix}-${re}${suffix}`)
```
It only pushes a candidate when the ratio is a whole integer. Anything
landing on a quarter/half step is silently dropped, no fix, no
suggestion, just the bare "arbitrary value detected" error stays.
Repro
In `apps/app/src/app/app.html`, temporarily set:
correctly rewrites to `class="p-4"`.
as a bare `tailwindcss/no-arbitrary-value` error.
valid Tailwind v4 utility the plugin just never proposes as a fix).
Why this matters here
We just wired up `tailwindcss/no-arbitrary-value` +
`tailwindcss/no-unnecessary-arbitrary-value` as `error` in
`eslint.config.ts` (see #11). Anyone who writes an off-scale pixel value
that happens to need a fractional multiplier gets a hard lint error with
no auto-fix and no suggested replacement, only the workaround of manually
computing `px / 4` and writing the dynamic class themselves.
Possible next steps
(francoismassart/eslint-plugin-tailwindcss) — its v4 support currently
lives on an `alpha/v4-basic-files` branch per the rule doc links, so
this may already be a known alpha-stage gap.
misconfiguration.