v4: Intellisense attempts to load CSS config from wrong file

[kylekz]

What version of VS Code are you using?

v1.95.3

What version of Tailwind CSS IntelliSense are you using?

v0.12.15 & v0.13.59 (pre-release)

What version of Tailwind CSS are you using?

v4.0.0-beta.2

What package manager are you using?

pnpm

What operating system are you using?

Windows

Tailwind config

/* src/styles/tailwind.css */
@import "tailwindcss" source("../");
@variant dark (&:where(.dark, .dark *));
@config '../../tailwind.config.js';

@import "./shadcn.css";
@import "./layout.css";

@theme {
  --font-geist-mono: var(--font-geist-mono);
}

/* src/styles/shadcn.css */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}

/* src/styles/layout.css */
@layer base {
  * {
    @apply border-red-500;
    /* border-color: red; */
  }
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      center: true,
      padding: "1rem",
      screens: {
        "2xl": "1250px",
      },
    },
  },
};

VS Code settings

https://gist.github.com/kylekz/bc26835bb3aad2815046c8816ac2c17f

Reproduction URL

https://github.com/kylekz/tailwindv4-nextjs/tree/intellisense

Describe your issue

Extension picks up the incorrect entry point for v4 CSS config, which results in intellisense not working

Locating server…
Booting server...
Setting up server…
Listening for messages…
Searching for Tailwind CSS projects in the workspace's folders.
{"tailwind":{"version":"4.0.0-beta.2","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.2","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.2","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
[Global] Creating projects: [{"folder":"/home/kyle/code/tailwind4","config":"/home/kyle/code/tailwind4/src/styles/layout.css","selectors":[{"pattern":"/home/kyle/code/tailwind4/src/styles/layout.css","priority":0},{"pattern":"/home/kyle/code/tailwind4/src/styles/**","priority":2},{"pattern":"/home/kyle/code/tailwind4/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.2","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/home/kyle/code/tailwind4","config":"/home/kyle/code/tailwind4/src/styles/tailwind.css","selectors":[{"pattern":"/home/kyle/code/tailwind4/src/styles/tailwind.css","priority":0},{"pattern":"/home/kyle/code/tailwind4/src/styles/**","priority":2},{"pattern":"/home/kyle/code/tailwind4/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.2","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}]
[Global] Preparing projects...
[Global] Initializing projects...
[Global] Initialized 0 projects

The @import "tailwindcss" statement is in styles/tailwind.css, which seems to be recognised after styles/layout.css. In this state, intellisense doesn't work at all.

If I go into styles/layout.css and replace the @apply usage with normal CSS like is commented out, intellisense then correctly picks up styles/tailwind.css as the correct config and will start working correctly. Using the experimental tailwindCSS.experimental.configFile extension option at the project-level also works to force it.