eslint-plugin-tailwindcss: [BUG] Support of Vue v-bind:class

@innocenzi 👇 npm i eslint-plugin-tailwindcss@3.9.0-beta.2

should do the trick 🎉

Here is a new beta version with all the rules available for v-bind

👉 npm i eslint-plugin-tailwindcss@3.9.0-beta.1

Keep in mind that arrays and objects passed to a :class attribute are parsed by its inner parts “in isolation”…

The plugin won’t lint array elements “amongst themselves”: e.g. :class="['p-0', 'p-10', 'm-0']" won’t throw a contradicting error for p-0 vs p-10 but :class="['p-0 p-10', 'm-0']" will throw a contradicting error for p-0 vs p-10

I’ll keep it in beta for few days at least, please test it out.

Thank you for the feedback.

@extrem7, @kevinvalk, @innocenzi, @NielsJanssen, @hrubysi I’m working on this and I’ll share a beta version soon starting only with no-custom-classname rule.

Are you willing to test it out and give feedback using real/complex projects once it is available in the beta channel ? Instructions will follow 😉

@hrubysi 👉 npm i eslint-plugin-tailwindcss3.9.0-beta.3 -D

Awesome! Thanks for your work. Looking forward to the sorting. ❤️

The entire underlining is normal, it could be enhanced for sure but it disappears quickly especially if the error is fixable automatically by the plugin.

As stated in my previous comment, for now only the no-custom-classname is supported but more rules will be published in beta channel soon and I’ll post it in this issue.

Here is a first beta for the no-custom-classname rule only, all rules will follow in the next betas

npm i eslint-plugin-tailwindcss@3.9.0-beta.0 -D

👉 Make sure the no-custom-classname rule is enabled.

I made an invalid test in https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/feat/v-bind/tests/lib/rules/wip.js#L71, take a look at it if you want to know what to expect in terms of usage.

Thank you for your feedback(s)