Intellisense with multiple tailwind configs doesn't work correctly

[artaommahe]

What version of VS Code are you using?

Version: 1.95.3 (Universal)

What version of Tailwind CSS IntelliSense are you using?

v0.12.16

What version of Tailwind CSS are you using?

v3.4.16

What package manager are you using?

npm

What operating system are you using?

macOS 15.1.1 (24B91)

Tailwind config

• first https://github.com/artaommahe/tailwind-intellisense-multiple-configs/blob/main/tailwind.config.js
• second https://github.com/artaommahe/tailwind-intellisense-multiple-configs/blob/main/tailwind.new-design.config.js

VS Code settings

nothing tailwind- or extension-related was changed

Reproduction URL

https://github.com/artaommahe/tailwind-intellisense-multiple-configs

• clone
• npm install
• npm run dev
• see that everything looks like expected
  
• open NewDesignComponent and Button components in vscode
• see that colors are wrong and for some tokens there is no autocompletion and highlighting

border should be red, bg black, text white, p-4 bigger, etc

same with colors, secondary border and p-2 are not recognized

Describe your issue

In our project we're on a way of slow migration from the old messy design system (set in the main tailwind config) to the new shinny one (set in another config). While tailwind itself recognizes both configs and there corresponding content files properly and all the colors and other values are correct in the browser, the vscode extension struggles here and sometimes shows correct (new) values for new-design/* and ui-kit/* components, sometimes not. In the reproduction repo it even always shows the old values for some reason.

[thecrypticace]

Hey! This is a limitation of the extension. I'd love to make this more automatic by default but that's a bit of an undertaking. Whenever you have a project with multiple configs like this the best way to handle this currently is to use our tailwindCSS.experimental.configFile setting to tell IntelliSense what files are attributed to a specific config. This is covered in the readme here.

I'd use these settings for the project in the reproduction (add these to a .vscode/settings.json file in your project root):

{
  "tailwindCSS.experimental.configFile": {
    "./tailwind.new-design.config.js": [
      "./src/new-design/**",
      "./src/ui-kit/**",
    ],
    "./tailwind.config.js": [
      "./index.html",
      "./src/**",
    ],
  }
}

The files should be matched in order so the first config (./tailwind.new-design.config.js) will take precedence over the second for the files in the ./src/new-design and ./src/ui-kit directories.

[artaommahe]

@thecrypticace is multiple configs support better with tailwind v4? (duplicating a question in case there is a difference here between intellisense extension and prettier plugin 😅)

[thecrypticace]

Generally, yes. However, in your project's case you'd likely still want to use the config option because the same "root" folders cover both sets of configs.