hover does not work without extra spaces with classRegex

What version of VS Code are you using?

Version: 1.89.1 (Universal) Commit: dc96b837cf6bb4af9cd736aa3af08cf8279f7685 Date: 2024-05-07T05:14:24.611Z Electron: 28.2.8 ElectronBuildId: 27744544 Chromium: 120.0.6099.291 Node.js: 18.18.2 V8: 12.0.267.19-electron.0 OS: Darwin arm64 23.5.0

What version of Tailwind CSS IntelliSense are you using?

For example: v0.10.5

What version of Tailwind CSS are you using?

For example: v3.2.4

Tailwind config

// using a custom presets, but should not have anything to do with this issue
module.exports = {
  presets: [config],
  content: ['src/**/*.{js,jsx,ts,tsx}'],
  corePlugins: {
    preflight: true
  },
  safelist: [
    {
      pattern: /outline/
    }
  ]
}

VS Code settings

{
  "tailwindCSS.classAttributes": [".*Styles.*", ".*ClassName.*", "addClassName", "class", "className"],
  "tailwindCSS.experimental.classRegex": [
    "classNames\\(([^)]*)\\)",
    "\"([^\"]*)\"",
    "'([^']*)'"
  ],
}

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.

TBD

Describe your issue

The regex described in #682 works for showing the color swatch:

and hover on a className with space around it:

but it does not work with className that is not surrounded with space. e.g. the tw-border-solid and tw-border-b in the example above.

Since the color swatch appears as expected, it seems like the swatch logic and the hover logic are different, and one works while the other doesn't.

Hey, you can fix this by changing your class regex to use an array that defines separate patterns for the container and class lists:

{
  "tailwindCSS.classAttributes": [".*Styles.*", ".*ClassName.*", "addClassName", "class", "className"],
  "tailwindCSS.experimental.classRegex": [
    ["classNames\\(([^)]*)\\)", "\"([^\"]*)\""],
    ["classNames\\(([^)]*)\\)", "'([^']*)'"],
  ],
}

This will tell intellisense that the classNames(…) portion contains zero or more class lists and then inside that the strings are the things that contain the actual list of classes.

If you want you can read more about the technical details of how it works here: https://github.com/tailwindlabs/tailwindcss-intellisense/issues/946#issuecomment-2050811573

tailwindlabs / tailwindcss-intellisense

hover does not work without extra spaces with classRegex #974