VSCode Tailwind CSS Intellisense autocompletion and suggestions not working after installing Tailwind v4

Support and improvements for TailwindCSS v4 are in progress. As of the fix in TailwindCSS Intellisense VSCode extension since February 2025 (v0.14.3), it is possible to specify the new CSS-first configuration as a configuration file.

Due to the proper v4 configuration detection, Intellisense will work the same way as in v3 without any additional settings. It remains compatible with both v3 and v4 versions simultaneously.

• tailwindlabs/tailwindcss-intellisense PR #1167: Clarify how the configFile option works with v4

Tailwind CSS v4.x (CSS entrypoints)

For v4 projects, specify the CSS file(s) that serve as your Tailwind entrypoints.

If your project contains a single CSS entrypoint, set this option to a string:

"tailwindCSS.experimental.configFile": "src/styles/app.css"

For projects with multiple CSS entrypoints, use an object where each key is a file path and each value is a glob pattern (or array of patterns) representing the files it applies to:

"tailwindCSS.experimental.configFile": {
  "packages/a/src/app.css": "packages/a/src/**",
  "packages/b/src/app.css": "packages/b/src/**"
}

Additionally, it no longer displays an error message if the configuration file is missing in v4.

• tailwindlabs/tailwindcss-intellisense PR #1164: Don't create v4 projects for CSS files that don't look like v4 configs

The VSCode extension can also be used for v4 projects that are not installed via NPM. This is important because the extension determines whether you are using v3 or v4 in your project based on the NPM package version by default. From now on, it can also detect the version for other installation methods (i.e., even without a package-lock.json).

• tailwindlabs/tailwindcss-intellisense PR #1157: Allow v4.0 projects not installed with npm to use IntelliSense

Since TailwindCSS no longer supports Sass, Less, or Stylus preprocessors from v4 onwards, the Intellisense extension will also not consider them starting from v4.

• tailwindlabs/tailwindcss-intellisense PR #1159: Ignore preprocessor files when looking for v4 configs

Tailwind css has released new version (4.0.0) and after installing it - ( npm install tailwindcss @tailwindcss/vite ) intellisense extension on VS Code stops working!

This occurs because in V4.0.0 there is no 'tailwind.config' file present in the root dir

To solve this problem follow these steps :

1 - after installing tailwind v4 , go to tailwind website and go to the old version that is v3.4.17

2 - then.. -> Get Started -> Framework Guides -> vite

3 - After that you can see the old steps. in the step 3 : " Configure your template paths " - copy the code of 'tailwind.config.js' :

       / @type {import('tailwindcss').Config} */
           export default {
         content: [
           "./index.html",
           "./src//*.{js,ts,jsx,tsx}",
         ],
         theme: {
         extend: {},
         },
          plugins: [],
          }

and then come back to vs code

4 - in vs code create 'tailwind.config.js' file in the root dir

5 - then paste the code which you've copied from Tailwind website (as mentioned in 3)

now autocompletion should work fine

I came across the same problem, what i did was - simply uninstall the extension from vscode and install it again.

Issue: Tailwind CSS IntelliSense Not Working in VS Code (v4)

If you're using Tailwind CSS v4 and noticing that IntelliSense isn't suggesting class names properly, the issue might be related to the "tailwindCSS.experimental.configFile" setting in VS Code's settings.json.

Solution The simplest and correct fix is to remove the following line from your settings.json:

"tailwindCSS.experimental.configFile": "./tailwind.config.js"

Why does this fix work?

In older versions of Tailwind CSS, this setting was used to manually specify the config file for IntelliSense. However, with Tailwind CSS v4, VS Code's Tailwind extension automatically detects the config file, making this setting unnecessary. Keeping it might cause IntelliSense to work incorrectly or incompletely.

Steps to Fix:

1.Open VS Code.

2.Press Ctrl + Shift + P → Search for "Preferences: Open Settings (JSON)".

3.Find and remove the following line: "tailwindCSS.experimental.configFile": "./tailwind.config.js"

4.Restart VS Code.

If this doesn't work...

"tailwindCSS.experimental.configFile": "./src/index.css"

If you redirect this line to a global CSS file instead of deleting it, it might work, in my case it works 100% when I do one of these two different cases.

I upgraded from v3 to v4 according to the documentation, with the command npx @tailwindcss/upgrade@next. After that tailwind.config.js disappeared, and all user settings moved to css. But the same problem with intellisense autocomplete appeared. The difference was that version 3 was installed as "devDependencies" in package.json and after the upgrade command to v4 it remained there. But version 4 should be installed in "dependencies". I moved "tailwindcss" and "@tailwindcss/postcss" from "devDependencies" to "dependencies" and it worked.

I agree, it's not entirely clear how this is related, it's just what I did when switching from v3 to v4, after which autocompletion returned.

UPD: After that, I installed v4 several times and no additional actions were required, everything worked from the very beginning. Perhaps after updating the Tailwind CSS IntelliSense extension for VSCode.

Tailwind CSS Intellisense v0.14.3 works with tailwindcss v4.0

All you need to do is re-install the extension and re-start your vs-code.

If that doesn't work, then do as said in another response here, try checking if the following line is still in your settings.json file for vs-code

"tailwindCSS.experimental.configFile": "./tailwind.config.js"

If it is present there, remove it manually.(You shouldn't have to do this but if re-installing doesn't work then you have to).

This was the very first response on stackoverflow by me. Hope it helps!

Installation
Identifier
bradlc.vscode-tailwindcss
Version
0.14.17

i'm working in a turbo-monorepo with in a next.js v15 project inside apps/web

The solution i found to fix the vsc intelisense issue was

setting up in .vscode/settigs.json

{
  "tailwindCSS.experimental.configFile": "packages/ui/src/styles/globals.css"
}

The Tailwind Labs VS Code extension for v4 will now use globals.css (which contains your @tailwind utilities)

I faced the same issue today. In the Output for Tailwind CSS IntelliSense there was an error indicating that it couldn't find tailwind.config.js file. I updated my settings.json in VSCode to remove line:

"tailwindCSS.experimental.configFile": "./tailwind.config.js",

After that the intellisense was able to initialize and worked as expected.

For me it was working in one project but not the other.

What I did is to remove tailwindCSS.classAttributes from .vscode/settings.json and the problem was gone.

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

I had to manually create a tailwind.config.js in the root directory Then added the following and now it works:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  plugins: [],
};

If it doesn't work following the instructions just use a quick workaround for now (tailwind.config.js), why waste time? See troubleshooting at the end of plugin instructions. So for Tailwind v4:

In tailwind.config.js (create one in root of the project):

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Go to .vscode folder > settings.json and add:

"tailwindCSS.experimental.configFile": "tailwind.config.js"

Go to the Tailwind CSS intellisense plugin > settings > install specific version > 0.10.15

Restart plugin (if it stops working, just ctrl + s and type again)

It's ugly, it's definitely not the solution but it works. Just till they fix it.

I came across the same issue, v4 no longer supports Javascript config file, so I created config file with .ts extension instead of .js and it worked:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/renderer/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

As a quick workaround, a blank tailwind.config.ts will make the extension work

I have an Angular Projekt and installed Tailwind 4 like described in the Framework Guide on the tailwind website.
But intellisense did not work.
Then i read again the instructions and saw that the stylesheet file, where i have to input - @import "tailwindcss" - must be a .css file.
So i had a .scss file. I changed this to .css and suddenly intellisense worked.

So it seems that tailwind 4 doesn't work with other stylesheet-file than .css

That's really bad, because for example the styling of Angular Material Components like it is recommended on the Angular Material Website works only with .scss.

If anyone have a solution for that problem, please write.