No intelissense for util classes

[JamDev0]

What version of VS Code are you using?

v1.83

What version of Tailwind CSS IntelliSense are you using?

For example: v0.7.0

What version of Tailwind CSS are you using?

v3

What package manager are you using?

npm

What operating system are you using?

Windows

Tailwind config

import type { Config } from 'tailwindcss'

const config: Config = {
  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: {
        ...
      },

      fontFamily: {
        ...
      }
    },
  },
  plugins: [],
}
export default config

VS Code settings

{
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.donotVerifyTags": true,
    "bracket-pair-colorizer-2.activeScopeCSS": [
        "borderStyle : solid",
        "borderWidth : 1px",
        "borderColor : {}",
        "opacity: 0.5"
    ],
    "bracket-pair-colorizer-2.colors": [
        "#001aff",
        "#26329c",
        "#00aeff",
        "#2e90bd",
        "#a200ff",
        "#71269c",
        "#f700ff",
        "#9c2ba0"
    ],
    "workbench.iconTheme": "symbols",
    "git.enableSmartCommit": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "workbench.startupEditor": "none",
    "workbench.tree.indent": 4,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "editor.codeActionsOnSave": {
        "source.organizeImports": true,
        "source.fixAll.eslint": true,
    },
    "cSpell.language": "en,pt-BR",
    "git.confirmSync": false,
    "editor.tabSize": 2,
    "editor.detectIndentation": false,
    "settingsSync.ignoredExtensions": [
      "dbaeumer.vscode-eslint",
      "bmewburn.vscode-intelephense-client",
      "ms-python.vscode-pylance",
      "ms-python.python"
    ],
    "[prisma]": {
      "editor.formatOnSave": true
    },
    "terminal.integrated.profiles.linux": {
      "bash": {
        "path": "bash",
        "icon": "terminal-bash"
      },
      "zsh": {
        "path": "zsh"
      },
      "fish": {
        "path": "fish"
      },
      "tmux": {
        "path": "tmux",
        "icon": "terminal-tmux"
      },
      "pwsh": {
        "path": "pwsh",
        "icon": "terminal-powershell"
      },
      "bash (2)": {
        "path": "/usr/bin/bash"
      },
      "sh": {
        "path": "/bin/sh"
      }
    },
    "terminal.integrated.defaultProfile.linux": "bash",
    "terminal.explorerKind": "external",
    "git.autofetch": true,
    "editor.accessibilitySupport": "off",
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    "editor.guides.bracketPairs": "active",
    "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
    "[python]": {
      "editor.formatOnType": true
    },
    "[markdown]": {
      "editor.unicodeHighlight.ambiguousCharacters": false,
      "editor.unicodeHighlight.invisibleCharacters": false,
      "diffEditor.ignoreTrimWhitespace": false,
      "editor.wordWrap": "on",
      "editor.quickSuggestions": {
        "comments": "off",
        "strings": "off",
        "other": "off"
      },
      "cSpell.fixSpellingWithRenameProvider": true,
      "cSpell.advanced.feature.useReferenceProviderWithRename": true,
      "cSpell.advanced.feature.useReferenceProviderRemove": "/^#+\\s/"
    },
    "eslint.rules.customizations": [],
    "eslint.options": {
      "allowInlineConfig": true
    },
    "eslint.codeActionsOnSave.rules": null,
    "markdown-preview-enhanced.previewTheme": "github-dark.css",
    "workbench.settings.openDefaultKeybindings": true,
    "symbols.hidesExplorerArrows": false,
    "eslint.lintTask.enable": true,
    "editor.fontSize": 16,
    "debug.console.fontSize": 16,
    "markdown.preview.fontSize": 16,
    "terminal.integrated.fontSize": 16,
    "tailwindCSS.experimental.classRegex": [
      ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
      ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
    ],
    "workbench.colorTheme": "GitHub Dark Default",
    "diffEditor.ignoreTrimWhitespace": false
}

Reproduction URL

https://gist.github.com/JamDev0/1cb403773f002a0f1d497a6a9341fb8e

Describe your issue

I created some util classes on my globals.css but they are not being showed by the intelissense. I've already reloaded the vscode and the extension.

[thecrypticace]

Hey, so right now we don't autocomplete classes defined in @layer (we have an open feature request for this though). The reasons for this have to do with how Tailwind works. We'd need to scan every CSS file, process every files @layer directives individually, potentially handling conflicting definitions from multiple files, etc…

Another issue I can forsee is completions being provided from multiple CSS files while, in reality, the code you're working on is "scoped" such that only a certain CSS file applies to it and you'd get completions for things that aren't actually available in the build you're working on. Though, maybe this is an okay tradeoff.

I've made a note internally to research what would be required to make this work for Tailwind v4 because it would be great if it did.

In the short term, a workaround for this would be to define your utilities as plugins instead.

Going to close this as we try to keep the issue tracker focused on potential bugs rather than feature requests / improvements (we use discussions for those).