[Feature request] Adding `no-unnecessary-arbitrary-value` rule

[JeromeDeLeon]

Hello, thanks for the excellent library, by the way. It helps migrating to TW v4 smoothly. 💪

I have a feature request (if it doesn't exist yet) coming from the eslint-plugin-tailwindcss library. I'm wondering if it's possible to add no-unnecessary-arbitrary-value.

For example, instead of h-[0], it will be h-0 or top-[50%] to top-1/2 or translate-[-50%] to -translate-1/2 instead. 🙇

[chanplexity]

yes, please add this feature, as i would also love to migrate from eslint-plugin-tailwindcss

[schoero]

I like the idea but this got much more difficult with tailwindcss v4.

Many utilities get calculated now. For example h-0 will generate the following css height: calc(var(--spacing) * 0); but h-[0] will simply result in height: 0;

The same goes for the top-[50%] and translate-[-50%] examples as well as many other classes.

This makes it really difficult to detect whether an arbitrary class is unnecessary or not.

I know Tailwind CSS has some utility functions for their migration scripts that could potentially normalize the generated CSS. However, those functions aren't publicly accessible, and integrating something similar is also not trivial because those functions rely on large parts of the parser logic of tailwind css, which I also don't want to reimplement.

https://github.com/tailwindlabs/tailwindcss/blob/main/packages/%40tailwindcss-upgrade/src/codemods/template/signatures.ts

[schoero]

TailwindCSS has introduced a concept called "canonical candidates" in their latest version 4.1.15 released today.

A canonicalized candidate is basically the simplest representation of a tailwind class. By utilizing the newly introduced canonicalizeCandidates function from tailwindcss, it is now possible to convert not only unnecessary arbitrary values but also variants or modifiers etc.

I created a new rule enforce-canonical-classes that directly implements this function.

The rule is available on the latest version of eslint-plugin-better-tailwindcss@^4.0.0-beta.3 and tailwindcss@^4.1.15.

Note that eslint-plugin-better-tailwindcss@^4.0.0-beta.3 already has some breaking changes

The performance and possibly the scope of the function may change in the future. Once it has been stabilized a bit I might be able to port it back to eslint-plugin-better-tailwindcss@^3.0.0.