[BUG] Plugin does not seem to detect invalid classes with specific class syntax in Vue

[Ericlm]

Describe the bug Within a Vue project, the plugin detects the invalid tailwind classes in the following situations:

• Static classes like <div class="text-yolo"/>
• Dynamic class in list-style ternary : <div :class="[bool ? 'text-yulu' : 'text-red-50']" />
• Dynamic class in object-style: <div :class="{'text-yepee': bool}" />

However, the plugin does not detect invalid classes in the "object within list" style, like: <div :class="[{'text-yala': is}]"/> (see https://vuejs.org/guide/essentials/class-and-style.html#class-and-style-bindings)

To Reproduce Steps to reproduce the behavior:

1. Create a fresh new vue project
2. Intall tailwindcss (https://tailwindcss.com/docs/guides/vite#vue)
3. Install eslint-plugin-tailwindcss
4. At this state, you should see the same issue as explained above

I made a repo with the issue at https://github.com/Ericlm/eslint-tailwind-issue. Just go to App.vue and you will see different examples of class binding as the ones above.

Expected behavior The plugin should report an invalid tailwind class as in the other situations. I should also mention that the plugin reports correctly if the order of classnames is wrong, so it seems to work within this case, but to simply "ignore" the invalid classes.

Screenshots You can see that the class "text-yala" is not reported as an invalid classname on the img tag.

PS: I didn't run the command in the terminal before the screenshot, so the "text-yepee" error doesn't appear in the CLI, but it is correctly reported by the plugin 😉.

Environment (please complete the following information):

• OS: macOS 14.3.1 (23D60)
• Softwares + version used:
  • VSCode Version: 1.87.0 (Universal)
  • npm 10.1.0
  • node v20.8.0

Additional context I was trying to edit classes in a complexe component with an object within an array when I found out that I could put any class without any linting error.

Repo with repro https://github.com/Ericlm/eslint-tailwind-issue