CVA autocompletion not working with shadcn/ui

[henrikzabel]

What version of VS Code are you using?
1.96.4

What version of Tailwind CSS IntelliSense are you using?
0.12.18

What version of Tailwind CSS are you using?
^3.4.17

What package manager are you using?
m

What operating system are you using?
Windows

Tailwind config

import type { Config } from "tailwindcss";

export default {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        chart: {
          "1": "hsl(var(--chart-1))",
          "2": "hsl(var(--chart-2))",
          "3": "hsl(var(--chart-3))",
          "4": "hsl(var(--chart-4))",
          "5": "hsl(var(--chart-5))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

VS Code settings

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorCustomizations": {
    "activityBarBadge.background": "#388E3C",
    "activityBar.activeBorder": "#388E3C",
    "list.activeSelectionForeground": "#388E3C",
    "list.inactiveSelectionForeground": "#388E3C",
    "list.highlightForeground": "#388E3C",
    "scrollbarSlider.activeBackground": "#388E3C50",
    "editorSuggestWidget.highlightForeground": "#388E3C",
    "textLink.foreground": "#388E3C",
    "progressBar.background": "#388E3C",
    "pickerGroup.foreground": "#388E3C",
    "tab.activeBorder": "#388E3C",
    "notificationLink.foreground": "#388E3C",
    "editorWidget.resizeBorder": "#388E3C",
    "editorWidget.border": "#388E3C",
    "settings.modifiedItemIndicator": "#388E3C",
    "settings.headerForeground": "#388E3C",
    "panelTitle.activeBorder": "#388E3C",
    "breadcrumb.activeSelectionForeground": "#388E3C",
    "menu.selectionForeground": "#388E3C",
    "menubar.selectionForeground": "#388E3C",
    "editor.findMatchBorder": "#388E3C",
    "selection.background": "#388E3C40",
    "statusBarItem.remoteBackground": "#388E3C"
  },
  "python.pythonPath": "MY_PATH",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "workbench.editorAssociations": {
    "*.ipynb": "jupyter-notebook"
  },
  "git.autofetch": true,
  "liveServer.settings.port": 5500,
  "liveServer.settings.proxy": {
    "proxyUri": "http://127.0.0.1:5500"
  },
  "terminal.integrated.tabs.enabled": true,
  "explorer.confirmDelete": false,
  "notebook.cellToolbarLocation": {
    "default": "right",
    "jupyter-notebook": "left"
  },
  "python.defaultInterpreterPath": "MY_PATH",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "explorer.confirmDragAndDrop": false,
  "editor.unicodeHighlight.allowedCharacters": {
    "️": true
  },
  "react-native-tools.showUserTips": false,
  "js/ts.implicitProjectConfig.experimentalDecorators": true,
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "glassit.alpha": 220,
  "[python]": {
    "diffEditor.ignoreTrimWhitespace": false,
    "gitlens.codeLens.symbolScopes": ["!Module"],
    "editor.formatOnType": true,
    "editor.wordBasedSuggestions": "off",
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit"
    },
    "editor.tabSize": 4
  },
  "terminal.integrated.gpuAcceleration": "off",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.inlineSuggest.enabled": true,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "codesnap.backgroundColor": "#FFFFFF",
  "codesnap.boxShadow": "rgba(0, 0, 0, 0) 0px 20px 68px",
  "editor.bracketPairColorization.enabled": false,
  "editor.tabSize": 2,
  "liveServer.settings.donotVerifyTags": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "colorize.languages": [
    "css",
    "sass",
    "scss",
    "less",
    "postcss",
    "sss",
    "stylus",
    "xml",
    "svg",
    "javascript"
  ],
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "php.validate.executablePath": "",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.zoomLevel": 1,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "search.exclude": {
    "**/node_modules": false
  },
  "editor.formatOnSave": true,
  "python.analysis.inlayHints.functionReturnTypes": true,
  "workbench.colorTheme": "Community Material Theme Darker",
  "gitlens.currentLine.enabled": false, // in modern version
  "gitlens.codeLens.authors.enabled": false,
  "gitlens.codeLens.recentChange.enabled": false,
  "codesandbox.currentWorkspace": "b335882c-11e3-48ec-aaa7-7eefb103c3f9",
  "remote.SSH.remotePlatform": {
    "sandbox.jkcvt5.csb": "linux",
    "178.128.206.45": "linux",
    "164.90.233.21": "linux",
    "207.154.217.143": "linux"
  },
  "editor.stickyScroll.enabled": false,
  "editor.indentSize": "tabSize",
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.accessibilitySupport": "off",
  "window.commandCenter": false,
  "python.analysis.autoImportCompletions": true,
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

Reproduction URL

https://github.com/HenrikZabel/tailwind-intellisense

Describe your issue
It is a normal create-next-app with a shadcn/ui button. When I press ctrl and spacebar or try to get hints on what tailwind styles are available, I get none.

[leomelzer]

Hey :)

From our config:

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.validate": true,
  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.preferTypeOnlyAutoImports": true
}

Note the classRegex. Maybe you can try that out for your usecase.

[thecrypticace]

Hi! You need to use the classRegex setting to detect these since they're not directly inside a className attribute. The one provided by @leomelzer works quite well so I'd use that one. 👍

See here: