[v4] Intellisense autocomplete is not working for my project structure

[jirsbek]

What version of VS Code are you using?

For example: 1.96.4

What version of Tailwind CSS IntelliSense are you using?

For example: 0.14.1

What version of Tailwind CSS are you using?

For example: 4.0.0

What package manager are you using?

For example: npm

What operating system are you using?

For example: macOS

Tailwind config

/* global.css */
@import "tailwindcss";
@source "../../../www/src/themes/template/";

Describe your issue

I'm just trying to upgrade my TailwindCSS 3 stack to v4 a Intellisense is not providing autocomplete.

My directory structure:

dev/
├─ styles/
│  ├─ global.css
├─ package.json
├─ webpack.config.js
www/
├─ src/
│  ├─ themes/
│  │  ├─ template/
│  │  │  ├─ index.php

When I open index.php Intellisense is not working me and in plugin output I read [GLOBAL] No matching project for document.

Only workaround I've found is to create workspace related .vscode settings.json and force global.css as config file:

{
  "tailwindCSS.experimental.configFile": "dev/src/styles/global.css",
}

In Tailwind v3 I used to have content: [] key defined in tailwind.config.js and this worked without an issue.

[jricaldi]

Same here. Meanwhile I removed v4 and reinstall ^v3.4.1

[aminul-islam6911]

Its working fine now.

[ezrnew]

I got it working in tailwind v4 just by creating same tailwind.config.js file in project directory as i used in v3 - config file is no longer required in version 4 but the plugin seems to be based on it.

[jirsbek]

@ezrnew I'm afraid it's not the solution as according to #1153 (comment) having old JS config file only forces InteliSense into a fallback TW 3 mode.

[FBisca]

I'm having the same problem with NextJS default package structure. But in my case I couldn't make it work not even with the fallback nor the experimental.configFile.

Tested it with tailwindcss 4.0.0 and 4.0.1

Sometimes I manage to make it work by removing all theme inside of the tailwind.config.ts and all the utilities layers from the global.css
With a simple customization it doesn't work anymore. For example:

theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        background: 'rgba(var(--color-background), <alpha-value>)',
        content: 'rgba(var(--color-content), <alpha-value>)',
        'content-secondary': 'rgba(var(--color-content-secondary), <alpha-value>)',
        'content-disabled': 'rgba(var(--color-content-disabled), <alpha-value>)',
        'content-hint': 'rgba(var(--color-content-hint), <alpha-value>)',
        border: 'rgba(var(--color-border), <alpha-value>)',

        primary: 'rgba(var(--color-primary), <alpha-value>)',
        'primary-content': 'rgba(var(--color-primary-content), <alpha-value>)',
      },
    },
  },

I'll have to wait a bit longer to upgrade to the v4

[KennethHoff]

My project structure is as follows:

.git/
src/
├─ apps/
│  ├─ web/
│  │  ├─ src/
│  │  │  ├─ app/
│  │  │  │  ├─ globals.css
│  │  │  │  ├─ blog/
│  │  │  │  │  ├─ page.tsx
├─ packages/
│  ├─ ui/
│  │  ├─ Header.tsx
|  ├─ design-system/
│  │  ├─ theme.css
│  │  ├─ base.css

Using the follow line in the globals.css file I can get the tailwind compiler to generate, but I can't get the LSP to work.

@import 'tailwindcss' source("../../../../");

Or rather, I can't get it to work reliably; If I add postcss.config.mjs to the packages/ui, install these packages (same packages as in web) and copy globals.css to the root directory of ui I can get some help, but even then it breaks whenever I go between the web project and the ui project; Requiring a manual reload of the LSP server.

    "@tailwindcss/postcss": "4.0.3",
    "prettier-plugin-tailwindcss": "0.6.11",
    "tailwindcss": "4.0.3",

Ideally, the LSP would figure it out on its own that ui and web share the same tailwind config, or at least some kind of tailwind.config I could put in the git root directory (kind of like a .editorconfig) where I can define such metadata; directories to scan for classes, path to the globals.css file and maybe the path to the correct package.json in case of version conflicts)

---

I'm using Neovim, next.js, turborepo and turbopack (Latest version of all of them, as of 2025-02-02

[adikari]

I cant get this working either. When I switch to project that uses v3 its working fine. on project with v4 no luck. I am using nvim with the language server.

[Devank-Yt]

if anyone still facing same issue then, you will find the solution here.
Tailwind IntelliSense issue

[ilxqx]

I also encountered the same issue.

[jolora]

I've encountered the same problem on the first project I've setup with Tailwind 4. My directory structure for the entrypoint is resources/css/site.css... when I had the extension show me the output I could see that it wasn't automatically picking up the entrypoint so I set "tailwindCSS.experimental.configFile": "resources/css/site.css" in my settings.json which resolved the problem with intellisense.

Problem is I have many Tailwind projects all with different entry points... hopefully the automatic detection will improve because this extension is a godsend.

[qwadrox]

For me the problem was not with the project structure. I removed tailwindCSS.classAttributes from .vscode/settings.json and the problem was gone.

     "tailwindCSS.classAttributes": [
        "class",
        "styleClass",
        "enter",
        "enterFrom",
        "enterTo",
        "leave",
        "leaveFrom",
        "leaveTo"
      ],