CSS conflict false positive when using classes conditionally via cx()

[donjo]

What version of VS Code are you using?

v1.96.2

What version of Tailwind CSS IntelliSense are you using?

v0.14.16

What version of Tailwind CSS are you using?

v4.0.14

What package manager are you using?

Deno

What operating system are you using?

MacOS

Tailwind config

Tailwind 4 no config file

VS Code settings

{
  "deno.enable": true,
  "deno.lint": true,
  "editor.defaultFormatter": "denoland.vscode-deno",
  "[typescriptreact]": {
    "editor.defaultFormatter": "denoland.vscode-deno"
  },
  "[typescript]": {
    "editor.defaultFormatter": "denoland.vscode-deno"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "denoland.vscode-deno"
  },
  "[javascript]": {
    "editor.defaultFormatter": "denoland.vscode-deno"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "denoland.vscode-deno"
  },
  "[css]": {
    "editor.defaultFormatter": "denoland.vscode-deno"
  },
  "[sql]": {
    "editor.defaultFormatter": "mtxr.sqltools"
  },
  "css.customData": [
    ".vscode/tailwind.json"
  ],
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["\\\/\\*\\s*tw\\s*\\*\\\/\\s*\\[([^\\]]*)\\]", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "sqltools.connections": [
    {
      "previewLimit": 50,
      "server": "localhost",
      "port": 5432,
      "driver": "PostgreSQL",
      "name": "db",
      "database": "postgres",
      "username": "",
      "password": ""
    }
  ],
  "[terraform]": {
    "editor.defaultFormatter": "hashicorp.terraform"
  }
}

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

Describe your issue

When using cx from class-variance-authority to specify which tailwind classes are used I get a cssConflict error saying I'm styling the same thing twice when in reality the classes are being applied in an either/or fashion.

[thecrypticace]

This is because of your custom classRegex. Please switch to using tailwindCSS.classFunctions for detecting cva and cx. See my response here for details: #1174 (comment)

[thecrypticace]

I realized I forgot to link the docs for tailwindCSS.classFunctions. It's in the readme here: https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#tailwindcssclassfunctions

[donjo]

Thank you! that helped.