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.

[thecrypticace]

Hey sorry to get back to this so late. I took a look at this and realized the problem is that there are imports after other at rules:

@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);
}

This isn't valid CSS and it's being thrown out. I'll see if I can surface those errors to the "Tailwind CSS: Show Output" panel at least.

If you change your tailwind.css file to the following your project will work:

@import 'tailwindcss' source('../');
@import './shadcn.css';
@import './layout.css';

@variant dark (&:where(.dark, .dark *));
@config '../../tailwind.config.js';

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

[kylekz]

That makes a lot of sense, thanks!