'xxx' applies the same CSS properties as 'xxx' in Vue 2 style binding

[francoistomasi]

What version of VS Code are you using?

v1.88.1

What version of Tailwind CSS IntelliSense are you using?

v0.10.5

What version of Tailwind CSS are you using?

v3.4.3

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind config

module.exports = {
  content: [
    "./public/**/*.html",
    "./src/**/*.html",
    "./src/**/*.vue",
    "./src/filters.js", // Custom style in filters
  ],
  theme: {
    extend: {
      colors: {
        primary: "#AE2229",
        secondary: "#E5C163",
      },
      screens: {
        stretch: { min: "540px", max: "540px" },
        compact: { min: "768px", max: "768px" },
      },
    },
  },
};

VS Code settings
n/a

Reproduction URL

https://github.com/francoistomasi/tailwindcss-intellisense-bug

Describe your issue

In my Vue 2 project, when I use the same type of classes with a breakpoint utility in style binding :class, the error message 'xxx' applies the same CSS properties as 'xxx'

Thanks!
François

[thecrypticace]

Hey! I'm not seeing these warnings in your reproduction. Your screenshot looks like it's from a different project given that the filename and line numbers are different from where the error occurs.

Can you update your reproduction?

[francoistomasi]

Hello !
Yes I've edit my post with these screenshots (from my original project) for more context.

But in the reproduction repo, I've the same warnings as you can see

[thecrypticace]

@francoistomasi Do you by chance have a custom class regex in your VS Code settings?

[francoistomasi]

@thecrypticace Well seen !
This seems to come from the classAttributes parameter where I added the :class property a while ago which should not have been taken into account at the time.
Looks like it works now without specific configuration.
I'll just leave the configuration for VueJS animations.

"tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    ":class", // Origin of the problem
    "enter-from-class",
    "enter-active-class",
    "enter-to-class",
    "leave-from-class",
    "leave-active-class",
    "leave-to-class"
  ],
  "tailwindCSS.emmetCompletions": true,
  "tailwindCSS.includeLanguages": {
    "smarty": "html"
  }

I don't know if this behaviour is a bug or not but that my solution at this point. 😃