Add support for disabling arbitrary values in classes

[searchableguy]

Is your feature request related to a problem? Please describe.

Arbitrary values and css is hard to maintain and update. It becomes inconsistent with the central design system and config.

Describe the solution you'd like

Ban the use of arbitrary value using linter.

[crimelabs786]

We've been looking for an ESLint rule like this at work. Based on discussions in the Tailwind community, there seems to be some interest in a restrictive rule like this: tailwindlabs/tailwindcss#4148

To provide some detail, we'd need an ESLint rule to have w-[456px] or text-black/[.56] flagged. Basically, any arbitrary value that lets one escape the design system enforced by Tailwind config should be flagged by this.

Ideally should be a configurable rule, that can be tuned as warning or error; and can be completely turned off.

[francoismassart]

@searchableguy & @crimelabs786
a) You would like to ban every arbitrary values at once ?

or

b) Whitelist option allowing few arbitrary properties and/or values ?

or

c) (a) + (b) ?

option (a) is the easiest to implement and to understand.

Also it would be turned off by default in the recommended rules.

[searchableguy]

Option A should cover the use case.

[francoismassart]

@searchableguy & @crimelabs786 are you on TW3 or TW2 ?

[searchableguy]

TW3

[francoismassart]

@searchableguy & @crimelabs786

Beta version 3.2.0-beta.1 is available with these changes:

• New rule: no-arbitrary-value which forbid using arbitrary values in classnames
• FIX: New default for cssFiles option used by no-custom-classname
• FIX: New option cssFilesRefreshRate for no-custom-classname

Please give it a shot with

npm i eslint-plugin-tailwindcss@3.2.0-beta.1 --save-dev

and give some feedback 😉

[francoismassart]

Shipped with 3.2.0

[searchableguy]

Thank you ❤️