Color Decorators not appearing inside clsx() with double quotes

[nwpappas]

What version of VS Code are you using?

1.85.2

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.4.1

What package manager are you using?

For example: npm

What operating system are you using?

For example: macOS

Tailwind config

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.svelte',
    './src/**/*.{html,js}'
  ],
  darkMode: ['class', '[flt-theme="dark"]'],
  theme: {
    fontFamily: {
      sans: ['Metropolis', 'Avenir Next', 'sans-serif'],
      mono: ['ui-monospace', 'Consolas', 'Menlo', 'Monaco', 'monospace']
    },
    extend: {},
  },
  plugins: [],
}

VS Code settings

{
  "editor.accessibilitySupport": "off",
  "terminal.integrated.fontFamily": "Fira Code",
  "terminal.external.osxExec": "iTerm.app",
  "git.autofetch": true,
  "editor.rulers": [80],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "node_modules/@cds/core/styles/module.tokens.css"
  ],
  "[python]": {
    "editor.formatOnType": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "svelte.enable-ts-plugin": true,
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  // "editor.bracketPairColorization.enabled": true,
  // "editor.guides.bracketPairs": "active"
}

Describe your issue

When adding classes to clsx() the color decorator appears when using single quotes, but not when using double quotes. This is troublesome when using Prettier's default quote rules.

[thecrypticace]

You should change your class regex to handle all the quotes like this:

{
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "'([^']*)'"],
    ["clsx\\(([^)]*)\\)", "\"([^\"]*)\""],
    ["clsx\\(([^)]*)\\)", "`([^`]*)`"],
  ]
}

Note that I've included the specific quote type in the inner, negated character class. Because we have a constraint of a single capture group it's easiest to split it up into three regexes.

With this change you should see colors in all spots: