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

Question

I've intsalled Tailwind CSS v4 (released in Jan'25) in VSCode project (Vite):

npm install tailwindcss @tailwindcss/vite

Now the Tailwind CSS Intellisense extension in VSCode is not working. It is not giving neither the auto suggestions nor the autocompletion is there!

There is no error either.

How to fix?

Answer 1

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

Answer 2

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