conflict class css prop inside condition

[dstrygwyr]

What version of Tailwind CSS are you using?
v4.0.3

What build tool (or framework if it abstracts the build tool) are you using?
"postcss": "^8.5.1", "next": "15.1.6",

What version of Node.js are you using?
v20.18.1

What browser are you using?
Chrome

What operating system are you using?
macOS

Reproduction URL

Describe your issue
conflict same class prop left inside condition

[thecrypticace]

Hey! So this one is probably caused by your class regex. I don't know which one you're using because you didn't provide your vscode settings but lets say it looks something like this:

{
  "tailwindCSS.experimental.classRegex": [
    "cn\\(((?:\\S|\\s)*?)\\)",
  ],
}

In this case we're the entire capture group as a single class list. This means multiple classes in there might appear to be in conflict when they're actually not. What you should do instead is something like this by specifying each regex as an array of 2 patterns:

{
  "tailwindCSS.experimental.classRegex": [
    ["cn\\(((?:\\S|\\s)*?)\\)", "[']([^']+)[']"],
    ["cn\\(((?:\\S|\\s)*?)\\)", "[\"]([^\"]+)[\"]"],
  ],
}

The first pattern in each group tells IntelliSense where to look for text that may contain one or more class lists. The second pattern tells IntelliSense where each class list actually is.

You can read more about how IntelliSense uses these regex in my answer here.

Hopefully that'll help. Also, if you post your class regex(es) I can try to tweak them for you 👍

[dstrygwyr]

ah i see, thank you