[v4] Intellisense auto-complete not working for @container variants

[ojvribeiro]

What version of VS Code are you using?

v1.96.4

What version of Tailwind CSS IntelliSense are you using?

v0.14.1

What version of Tailwind CSS are you using?

v4.0.0

What package manager are you using?

bun v1.2

What operating system are you using?

Windows

Tailwind config

@import 'tailwindcss';

VS Code settings

Details

{
  "css.lint.unknownAtRules": "ignore",
  "less.lint.unknownAtRules": "ignore",
  "scss.lint.unknownAtRules": "ignore",
  "diffEditor.diffAlgorithm": "advanced",
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  "editor.cursorWidth": 2,
  "editor.dragAndDrop": false,
  "editor.inlayHints.enabled": "off",
  "editor.inlineSuggest.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.minimap.showSlider": "always",
  "explorer.compactFolders": false,
  "explorer.confirmDelete": false,
  "files.insertFinalNewline": true,
  "files.simpleDialog.enable": true,
  "github.copilot.enable": {
    "*": true,
    "plaintext": true,
    "markdown": true,
    "scminput": false
  },
  "highlight-matching-tag.highlightFromContent": true,
  "highlight-matching-tag.highlightSelfClosing": true,
  "highlight-matching-tag.styles": {
    "opening": {
      "name": {
        "highlight": "rgba(255, 255, 255, 0.05)",
        "underline": "cyan"
      }
    }
  },
  "html.format.indentInnerHtml": true,
  "html.format.templating": true,
  "intelephense.stubs": [
    "apache",
    "bcmath",
    "bz2",
    "calendar",
    "com_dotnet",
    "Core",
    "ctype",
    "curl",
    "date",
    "dba",
    "dom",
    "enchant",
    "exif",
    "FFI",
    "fileinfo",
    "filter",
    "fpm",
    "ftp",
    "gd",
    "gettext",
    "gmp",
    "hash",
    "iconv",
    "imap",
    "intl",
    "json",
    "ldap",
    "libxml",
    "mbstring",
    "meta",
    "mysqli",
    "oci8",
    "odbc",
    "openssl",
    "pcntl",
    "pcre",
    "PDO",
    "pdo_ibm",
    "pdo_mysql",
    "pdo_pgsql",
    "pdo_sqlite",
    "pgsql",
    "Phar",
    "posix",
    "pspell",
    "random",
    "readline",
    "Reflection",
    "session",
    "shmop",
    "SimpleXML",
    "snmp",
    "soap",
    "sockets",
    "sodium",
    "SPL",
    "sqlite3",
    "standard",
    "superglobals",
    "sysvmsg",
    "sysvsem",
    "sysvshm",
    "tidy",
    "tokenizer",
    "wordpress",
    "xml",
    "xmlreader",
    "xmlrpc",
    "xmlwriter",
    "xsl",
    "Zend OPcache",
    "zip",
    "zlib"
  ],
  "material-icon-theme.saturation": 0.9,
  "svg.preview.autoShow": true,
  "svg.preview.mode": "svg",
  "telemetry.telemetryLevel": "error",
  "totalTypeScript.hideAllTips": false,
  "totalTypeScript.hideBasicTips": true,
  "totalTypeScript.hiddenTips": [
    "passing-generics-to-types",
    "typeof",
    "generic-slots-in-functions",
    "tuple-type",
    "omit-utility-type",
    "non-null-expression",
    "interface-with-generics",
    "record-utility-type",
    "never-keyword",
    "type-alias-with-generics",
    "mapped-type",
    "keyof",
    "returntype-utility-type",
    "awaited-utility-type",
    "type-alias-with-multiple-generics",
    "extract-utility-type",
    "conditional-type",
    "nested-conditional-type",
    "infer"
  ],
  "terminal.explorerKind": "external",
  "terminal.external.windowsExec": "C:\\Users\\[omitted]\\AppData\\Local\\Microsoft\\WindowsApps\\wt.exe",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.cursorWidth": 1,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.enableMultiLinePasteWarning": "auto",
  "terminal.integrated.fontFamily": "Inconsolata",
  "terminal.integrated.fontSize": 16,
  "terminal.integrated.fontWeight": "400",
  "terminal.integrated.profiles.windows": {
    "Cmder": {
      "args": ["/k", "${env:cmder_root}\\vendor\\bin\\vscode_init.cmd"],
      "color": "terminal.ansiGreen",
      "icon": "terminal-bash",
      "name": "Cmder",
      "path": [
        "${env:windir}\\Sysnative\\cmd.exe",
        "${env:windir}\\System32\\cmd.exe"
      ]
    }
  },
  "window.dialogStyle": "custom",
  "window.newWindowDimensions": "inherit",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.list.horizontalScrolling": true,
  "workbench.list.smoothScrolling": true,
  "workbench.tree.indent": 12,
  "workbench.view.alwaysShowHeaderActions": true,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vue.updateImportsOnFileMove.enabled": true,
  "git.openRepositoryInParentFolders": "never",
  "redhat.telemetry.enabled": false,
  "gitlens.terminal.overrideGitEditor": false,
  "colorize.languages": [
    "css",
    "tailwindcss",
    "javascript",
    "typescript",
    "vue"
  ],
  "workbench.colorTheme": "Material Syntax - Dark",
  "explorer.confirmDragAndDrop": false,
  "window.commandCenter": false,
  "security.allowedUNCHosts": ["wsl.localhost"],
  "git.autofetch": true,
  "vscode-color-picker.languages": [
    "css",
    "tailwindcss",
    "python",
    "javascript",
    "typescript",
    "vue"
  ],
  "editor.stickyScroll.defaultModel": "foldingProviderModel",
  "editor.stickyScroll.maxLineCount": 10,
  "workbench.tree.stickyScrollMaxItemCount": 15,
  "errorLens.messageTemplate": "($count) $message",
  "errorLens.delayMode": "debounce",
  "vue.inlayHints.missingProps": true,
  "vue.splitEditors.layout.right": ["template", "customBlocks"],
  "editor.smoothScrolling": true,
  "editor.fontFamily": "'Consolas', 'monospace', monospace",
  "settingsSync.ignoredSettings": ["editor.fontFamily"],
  "window.menuBarVisibility": "compact",
  "github.copilot.editor.enableAutoCompletions": true,
  "git.confirmSync": false,
  "terminal.integrated.shellIntegration.enabled": false,
  "javascript.updateImportsOnFileMove.enabled": "never",
  "files.associations": {
    "*.ts": "typescript",
    "*.css": "css"
  },
  "terminal.integrated.scrollback": 3000,
  "terminal.integrated.env.windows": {},
  "editor.gotoLocation.multipleDefinitions": "goto",
  "vue.server.hybridMode": true,
  "php.validate.executablePath": "[omitted]\\php.exe",
  "security.promptForLocalFileProtocolHandling": false,
  "cSpell.userWords": [
    // omitted
  ],
  "cSpell.language": "en,pt-BR",
  "cSpell.ignoreWords": [
    // omitted
  ],
}

Reproduction URL

https://github.com/ojvribeiro/tailwind-intellisense-repro

Describe your issue

In a fresh minimal project (React or Vue), intellisense auto-complete is not working for @container variants like @sm or @md. On hover I still get the popover:

gadwad.mp4

[thecrypticace]

This looks like it's probably a bug in Tailwind CSS itself. I'll take a look.

[thecrypticace]

This will be fixed in the next patch release of Tailwind CSS. Thanks for reporting it. ✨