francoismassart/eslint-plugin-tailwindcss

Add support for disabling arbitrary values in classes

searchableguy opened this issue · 8 comments

searchableguy commented

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 commented

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 commented

@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 commented

Option A should cover the use case.

francoismassart commented

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

francoismassart commented

@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 commented

Shipped with 3.2.0

  • ❤️1
searchableguy commented

Thank you ❤️