classRegex requires extra spaces to work

[moroshko]

What version of Tailwind CSS IntelliSense are you using?

v0.9.1

What version of Tailwind CSS are you using?

v3.2.4

What package manager are you using?

yarn

What operating system are you using?

macOS

Tailwind config

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

VS Code settings

{
  "tailwindCSS.classAttributes": ["className", "tw"],
  "tailwindCSS.emmetCompletions": true,
  "tailwindCSS.experimental.classRegex": ["cx\\(([^)]*)\\)", "\"([^\"]*)\""],
  "tailwindCSS.colorDecorators": false
}

Reproduction URL

https://github.com/moroshko/tailwind-hover-issue

See: app/page.tsx

Describe your issue

Given the following code, I expect hovers on text-center and text-3xl to show the generated CSS. However, they don't show up.

import cx from "clsx";

const props = {
  className: cx("text-center text-3xl"),
};

Is there anything wrong with my classRegex?

["cx\\(([^)]*)\\)", "\"([^\"]*)\""]

For some reason, if I change the code to be cx(" text-center text-3xl ") (note the spaces!), the hovers work as expected.

[moroshko]

Ok, the issue was with the classRegex.
[["cx\\(([^)]*)\\)", "\"([^\"]*)\""]] works as expected.