[NextUI] extendVariants is not triggering intellisense in a Turborepo

[ellisio]

What version of VS Code are you using?

v1.91.1 (Universal)

What version of Tailwind CSS IntelliSense are you using?

v0.12.5

What version of Tailwind CSS are you using?

v3.4.6

What package manager are you using?

pnpm

What operating system are you using?

macOS

Tailwind config

packages/ui/tailwind.config.ts:

import { nextui } from "@nextui-org/react";
import { join } from "path";
import { Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

const config: Config = {
  content: [
    "./src/**/*.{ts,tsx}",
    join(__dirname, "../../packages/**/*.{ts,tsx}"),
    join(__dirname, "../../node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"),
  ],
  darkMode: "class",
  theme: {
    extend: {
      boxShadow: {
        inset: "inset 0 0 0 1px var(--ds-gray-alpha-300)",
      },
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
    },
  },
  plugins: [
    nextui({
      prefix: "ds",
    }),
  ],
};

VS Code settings

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "editor.formatOnPaste": false,
  "editor.formatOnSave": false,
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "eslint.workingDirectories": [
    {
      "pattern": "apps/*/"
    },
    {
      "pattern": "packages/*/"
    }
  ],
  "sherlock.previewLanguageTag": "en",
  "tailwindCSS.classAttributes": ["class", "className", "classNames"],
  "tailwindCSS.experimental.classRegex": [
    [
      "cn\\(([^)]*)\\)",
      "extendVariants\\((([^()]*|\\([^()]*\\))*)\\)",
      "[\"'`]([^\"'`]*).*?[\"'`]"
    ]
  ],
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  },
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.tsdk": "node_modules/typescript/lib",
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#1e3a8a",
    "titleBar.activeForeground": "#ffffff",
    "titleBar.inactiveBackground": "#18181b",
    "titleBar.inactiveForeground": "#ffffff"
  }
}

Reproduction URL

https://github.com/ellisio/tailwindcss-intellisense-bug

Describe your issue

With the given configuration, I would expect intellisense to work when typing in either variants.class.* or compoundVariants.*.class in packages/button/button.tsx. However, neither seem to work.

Also seems to not work if you import cn and try to use intellisense for that. For example:

import { cn } from "@nextui-org/react";

// ... somewhere in the component
const test = cn("f-full"); // intellisense not activated

Note: I did not include the apps/* directory. If needed, you can put a generic NextJS app in there that references the @repo/ui/* tailwind config.

[winchesHe]

Change to use

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

[ellisio]

Always regex issues... my goodness. Thank you so much @winchesHe!