[v4] Tailwindcss-intellisense is incompatible with new dart sass v3.0 @use (instead of @import)

[hikack]

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?

yarn v4.6.0

What operating system are you using?

Windows 11

Tailwind config

packages\config-tailwind: => tailwind.css

@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
  --color-primary: #fff;
}

@layer theme {
  [data-theme="dark"],
  [data-theme="dark"] * {
    --color-primary: #000;

    /* variables inside ui package have ui prefix */
    --ui-color-primary: #000;
  }
}

packages\ui: => tailwind.css

@import "tailwindcss" prefix(ui);
@import "@packages/config-tailwind/tailwind.css";

@plugin "daisyui";

@plugin "daisyui/theme" {
  name: "light";
  default: true;
}

@plugin "daisyui/theme" {
  name: "dark";
  default: false;
}

apps\web: => tailwind.css

@import "tailwindcss";
@import "@packages/tailwind-config/tailwind.css";
@import "@packages/ui/styles.css"; // build output of the UI styles

Note: Tailwind configs are in CSS file format, but they have been used in combination with SCSS files, for example, inside UI package:

index.scss

@use "tailwind.css"; // importing tailwind.css
@use "global.scss"; // importing global styles

global.scss

body {
  @apply ui:bg-background ui:font-sans ui:text-textPrimary;
}

* {
  @apply ui:scroll-smooth;
}

VS Code settings

{
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Tailwind CSS IntelliSense output

Locating server…
Checking if PROJECTDIRECTORY\packages\config-tailwind\tailwind.css may be Tailwind-related…
Booting server...
Setting up server…
Listening for messages…
Searching for Tailwind CSS projects in the workspace's folders.
hoist-at-import: The file 'PROJECTDIRECTORY/apps/landing/src/styles/tailwind.css' contains @import rules after other at rules. This is invalid CSS and may cause problems with your build.
hoist-at-import: The file 'PROJECTDIRECTORY/packages/config-tailwind/tailwind.css' contains @import rules after other at rules. This is invalid CSS and may cause problems with your build.
hoist-at-import: The file 'PROJECTDIRECTORY/packages/ui/src/styles/tailwind.css' contains @import rules after other at rules. This is invalid CSS and may cause problems with your build.
{"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false},"path":"PROJECTDIRECTORY/apps/landing/src/styles/global.scss"}
{"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false},"path":"PROJECTDIRECTORY/apps/web/src/styles/tailwind.css"}
{"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false},"path":"PROJECTDIRECTORY/apps/landing/src/styles/tailwind.css"}
{"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false},"path":"PROJECTDIRECTORY/apps/web/src/styles/global.scss"}
{"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false},"path":"PROJECTDIRECTORY/packages/ui/src/styles/tailwind.css"}
{"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false},"path":"PROJECTDIRECTORY/packages/ui/src/styles/global.scss"}
[Global] Creating projects: [{"folder":"PROJECTDIRECTORY","config":"PROJECTDIRECTORY/apps/landing/src/styles/global.scss","selectors":[{"pattern":"PROJECTDIRECTORY/apps/landing/src/styles/global.scss","priority":0},{"pattern":"PROJECTDIRECTORY/apps/landing/src/styles/**","priority":2},{"pattern":"PROJECTDIRECTORY/apps/landing/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"PROJECTDIRECTORY","config":"PROJECTDIRECTORY/apps/landing/src/styles/tailwind.css","selectors":[{"pattern":"PROJECTDIRECTORY/apps/landing/src/styles/tailwind.css","priority":0},{"pattern":"PROJECTDIRECTORY/apps/landing/src/styles/**","priority":2},{"pattern":"PROJECTDIRECTORY/apps/landing/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"PROJECTDIRECTORY","config":"PROJECTDIRECTORY/apps/web/src/styles/global.scss","selectors":[{"pattern":"PROJECTDIRECTORY/apps/web/src/styles/global.scss","priority":0},{"pattern":"PROJECTDIRECTORY/apps/web/src/styles/**","priority":2},{"pattern":"PROJECTDIRECTORY/apps/web/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"PROJECTDIRECTORY","config":"PROJECTDIRECTORY/apps/web/src/styles/tailwind.css","selectors":[{"pattern":"PROJECTDIRECTORY/apps/web/src/styles/tailwind.css","priority":0},{"pattern":"PROJECTDIRECTORY/apps/web/src/styles/**","priority":2},{"pattern":"PROJECTDIRECTORY/apps/web/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"PROJECTDIRECTORY","config":"PROJECTDIRECTORY/packages/ui/src/styles/global.scss","selectors":[{"pattern":"PROJECTDIRECTORY/packages/ui/src/styles/global.scss","priority":0},{"pattern":"PROJECTDIRECTORY/packages/ui/src/styles/**","priority":2},{"pattern":"PROJECTDIRECTORY/packages/ui/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"PROJECTDIRECTORY","config":"PROJECTDIRECTORY/packages/ui/src/styles/tailwind.css","selectors":[{"pattern":"PROJECTDIRECTORY/packages/ui/src/styles/tailwind.css","priority":0},{"pattern":"PROJECTDIRECTORY/packages/ui/src/styles/**","priority":2},{"pattern":"PROJECTDIRECTORY/packages/ui/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}]
[Global] Preparing projects...
[Global] Initializing projects...
[Global] Initialized 0 projects
[packages\ui\src\styles\global.scss] Initializing...
[Global] Adding watch patterns: PROJECTDIRECTORY/packages/ui/src/styles/global.scss, PROJECTDIRECTORY/packages/ui/src/styles, PROJECTDIRECTORY/packages/ui/src, PROJECTDIRECTORY/packages/ui, PROJECTDIRECTORY/packages, PROJECTDIRECTORY
[packages\ui\src\styles\global.scss] supported features: ["css-at-theme","layer:base","content-list"]
[Info  - 12:33:16 AM] [GLOBAL] No matching project for document {
  fsPath: 'PROJECTDIRECTORY\\README.md',
  normalPath: '/PROJECTDIRECTORY/README.md'
}
[Info  - 12:33:16 AM] [GLOBAL] No matching project for document {
  fsPath: 'PROJECTDIRECTORY\\README.md',
  normalPath: '/PROJECTDIRECTORY/README.md'
}
[packages\ui\src\styles\global.scss] Loaded tailwindcss v4.0.0: PROJECTDIRECTORY\node_modules\tailwindcss
[packages\ui\src\styles\global.scss] Building...
[packages\ui\src\styles\global.scss] Initializing...
[packages\ui\src\styles\global.scss] supported features: ["css-at-theme","layer:base","content-list"]
[packages\ui\src\styles\global.scss] Loaded tailwindcss v4.0.0: PROJECTDIRECTORY\node_modules\tailwindcss
[packages\ui\src\styles\global.scss] Building...
[packages\ui\src\styles\global.scss] Initializing...
[packages\ui\src\styles\global.scss] supported features: ["css-at-theme","layer:base","content-list"]
[packages\ui\src\styles\global.scss] Loaded tailwindcss v4.0.0: PROJECTDIRECTORY\node_modules\tailwindcss
[packages\ui\src\styles\global.scss] Building...
[packages\ui\src\styles\global.scss] Initializing...
[packages\ui\src\styles\global.scss] supported features: ["css-at-theme","layer:base","content-list"]
[packages\ui\src\styles\global.scss] Loaded tailwindcss v4.0.0: PROJECTDIRECTORY\node_modules\tailwindcss
[packages\ui\src\styles\global.scss] Building...
[packages\ui\src\styles\tailwind.css] Initializing...
[Global] Adding watch patterns: PROJECTDIRECTORY/packages/ui/src/styles/tailwind.css
[packages\ui\src\styles\tailwind.css] supported features: ["css-at-theme","layer:base","content-list"]
[packages\ui\src\styles\tailwind.css] Loaded tailwindcss v4.0.0: PROJECTDIRECTORY\node_modules\tailwindcss
[packages\ui\src\styles\tailwind.css] Building...
/*! 🌼 daisyUI 5.0.0-beta.2 */
[Global] Adding watch patterns: PROJECTDIRECTORY\node_modules\tailwindcss\index.css, PROJECTDIRECTORY\packages\config-tailwind\tailwind.css, PROJECTDIRECTORY\node_modules\daisyui\index.js, PROJECTDIRECTORY\node_modules\daisyui\theme\index.js
[Info  - 12:34:42 AM] [GLOBAL] No matching project for document {
  fsPath: 'PROJECTDIRECTORY\\README.md',
  normalPath: '/PROJECTDIRECTORY/README.md'
}
[packages\ui\src\styles\global.scss] Initializing...
[packages\ui\src\styles\global.scss] supported features: ["css-at-theme","layer:base","content-list"]
[packages\ui\src\styles\global.scss] Loaded tailwindcss v4.0.0: PROJECTDIRECTORY\node_modules\tailwindcss
[packages\ui\src\styles\global.scss] Building...

Describe your issue

Autocomplete doesn't work for any apps or packages; Tailwind works perfectly itself. After debugging, I noticed if I changed:

@use "tailwind.css"; // importing tailwind.css
@use "global.scss"; // importing global styles

to

@import "tailwind.css"; // importing tailwind.css
@import "global.scss"; // importing global styles

The problem has been resolved. However, my builds are failing since @import is deprecated, so I guess you should add support for @use.

[hikack]

@thecrypticace would you please take a look at this?