Passing a string to an array in tailwindCSS.experimental.classRegex does not work autocompletion

[YH-Seo]

What version of VS Code are you using?

Version: 1.85.1 (Universal)

What version of Tailwind CSS IntelliSense are you using?

v0.10.4

What version of Tailwind CSS are you using?

3.4.0

What package manager are you using?

pnpm

What operating system are you using?

macOS Ventura 13.5.2

Tailwind config

import type { Config } from 'tailwindcss';
import bybConfig from '@pack/config-tailwind/byb';

const config: Pick<Config, 'prefix' | 'presets' | 'content' | 'theme'> = {
  presets: [bybConfig], //byb Config extends color
  content: ['./src/**/*.tsx'],
  prefix: 'ui-',
};

export default config;

VS Code settings

{
  // ...
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`... -> tw`...`
    "tw\\(`([^`]*)", // tw(`... -> tw(`...`)
    "tw\\(\\[`([^`]*)", // tw([`... -> tw([`...`])
    "tw\\(\\[(`([^`]*)`, )+`([^`]*)" // tw([`...`, `... -> tw([`...`, `...`])
  ],
  // ...
}

Actually, problem also occured when no comments in json

Reproduction URL

Check below description. You can reproduce easily :)

Describe your issue

// util.ts
export const tw = (classNames: string[] | string | TemplateStringsArray) => {
  return `${Array.isArray(classNames) ? classNames.join(' ') : classNames}`;
};

// Typo.tsx
export const Typo = ({ type, children }: TypoProps) => {
  const typeVariants: Record<TypoProps['type'], string> = {
    Title_1_EB: tw`ui-text-title-1 ui-font-extrabold`, // -> Good
    Title_1_SB: tw(`ui-text-title-1 ui-font-semibold`), // -> Good
    Title_2_EB: tw([`ui-text-title-2 ui-font-extrabold`]), // -> Good
    Title_2_SB: tw([`ui-text-title-2`, `ui-font-semibold`]), // -> BAD !!
    // ...
  }
})

In Good case, works properly.

In the above BAD case, autocompletion is not working properly.

I tested the code below at https://regex101.com/ and it works normally.

[thecrypticace]

Hey so the problem here is that, with the way the feature works currently, you must have exactly one capture group. This was done to ensure there's no ambiguity for what's considered to be a class list. If you need additional groups to use other regex features you can make them non-capturing ((?:…))

To support situations like tw(...), tw([...]), tw([..., ...]) you can use the combo form of the classRegex filter which supports defining a container regex as well as a class list regex:

["tw\\(([^\\)]*)\\)", "`([^`]*)`"]

This basically says:

1. Look inside tw(…) function calls
2. Find any template string literals and consider those to be class lists

And you can combine both types in the same list — so for your config I would write it like so:

  "tailwindCSS.experimental.classRegex": [
    // tw`...`
    "tw`([^`]*)",

    // tw(`...`)
    // tw([`...`])
    // tw([`...`, `...`])
    ["tw\\(([^\\)]*)\\)", "`([^`]*)`"],
  ],

Hope that helps! ✨

[YH-Seo]

It works nice.... 👍 Thanks.

[adiramardiani]

Hi @thecrypticace Sorry for mention

Can you help me, I not good for regex, I'm using primevue tailwind (unstyled) and need tailwindcss-intellisense on my preset folder

for example https://github.com/primefaces/primevue-tailwind/blob/main/presets/lara/autocomplete/index.js

export default {
    root: ({ props }) => ({
        class: [
            'relative',

            // Flex
            'inline-flex',

            // Size
            { 'w-full': props.multiple },

            // Color
            'text-surface-900 dark:text-surface-0',

            //States
            {
                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
            }
        ]
    }),
    transition: {
        enterFromClass: 'opacity-0 scale-y-[0.8]',
        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
        leaveToClass: 'opacity-0'
    }
};

How to configure tailwindCSS.experimental.classRegex or other tailwind intellisense vscode config, to make this have autocomplete or hover class ?