I'm importing the classnames library as cx, and using it to generate Tailwind class name strings in a React project like this.
const buttonClasses = cx(
'flex flex-row items-center',
'text-wave-brown text-xl p-1.5 rounded-xl',
selected && 'bg-slate-800',
isDisabled && 'text-zinc-700 bg-transparent',
props.className
);
The Tailwind Intellisense plugin supports adding a regex to trigger autocomplete. I've added the bottom row ("cx\\(([^\\)]*)\\)") in the VS Code config.
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)", // tw`...`
"tw=\"([^\"]*)", // <div tw="..." />
"tw={\"([^\"}]*)", // <div tw={"..."} />
"tw\\.\\w+`([^`]*)", // tw.xxx`...`
"tw\\(.*?\\)`([^`]*)", // tw(Component)`...`
"cx\\(([^\\)]*)\\)" // cx(...)
],
This works, but it triggers autocomplete even outside of the string literals. I would prefer to only get autocomplete when my cursor is inside of a string literal (between the ' ticks).
Is there a way to write the regex so that it only matches the content inside the string literals that are also arguments of the cx() function?