Tailwind CSS Intellisense autocomplete does not work in React+Vite project

Question

Visual Studio Code Insider .v1.100.0-insider. Tailwind CSS Intellisense v0.14.15. Tailwind v3.4.17 installed via npm. Windows 11 64-bit.

Tailwind config:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
      },
      gridTemplateColumns: {
        "70/30": "70% 28%",
      },
    },
  },
  plugins: [],
};

Steps to reproduce:

Run npm create vite@latest
Run npm install -D tailwindcss@3 postcss autoprefixer
Run npx tailwindcss init -p
Add to Tailwind CSS config

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

Try entering a Tailwind class in className attribute in JSX files or in class in HTML files.

Tailwind CSS autocomplete does not work in React JSX files and HTML files.

It is in the same folder as index.html. It still does not work. — IgorArnaut
– IgorArnaut, Commented Apr 18 at 13:38
This question is similar to: VSCode Tailwind CSS Intellisense autocompletion and suggestions not working after installing Tailwind v4. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. --> "tailwindCSS.experimental.configFile": "tailwind.config.js" — rozsazoltan
– rozsazoltan, Commented Apr 18 at 13:40

rozsazoltan · Accepted Answer · 2025-04-18 13:53:03Z

1

`tailwindCSS.experimental.configFile`

This setting allows you to manually specify the CSS entrypoints (for v4 projects) or the Tailwind configuration file (for v3 projects). By default, the extension attempts to detect your project setup automatically:

For Tailwind CSS v4: The extension scans your project for CSS files and determines the "root" CSS file.

For Tailwind CSS v3 (and earlier): The extension automatically uses the first tailwind.config.{js,cjs,mjs,ts,cts,mts} file it finds.

If IntelliSense is unable to detect your project, you can use this setting to define your config files manually.

Tailwind CSS v3.x and earlier (config files)

For v3 projects and below, specify the Tailwind configuration file(s) instead.

If your project contains a single Tailwind config, set this option to a string:
"tailwindCSS.experimental.configFile": ".config/tailwind.config.js"

To summarize, IntelliSense automatically detects whether you're using v3 or v4, as long as you're following the standard setup (using NPM installation and, in the case of v3, having a tailwind.config.{js,cjs,mjs,ts,cts,mts} file in the root directory).

If your tailwind.config.{js,cjs,mjs,ts,cts,mts} file isn't located in the root folder of your open workspace, you'll need to manually specify the correct path in your settings, either locally or at the user level, using the configFile property.

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

Autocomplete everywhere

After that, autocomplete hints will automatically appear when typing inside class="..." or className="..." HTML attributes. This can be extended to also offer suggestions in JavaScript functions, objects, variables, or other attributes. I've written more about this in other questions.

How to Get TailwindCSS IntelliSense for twrnc in VSCode? - StackOverflow
How can I enable TailwindCSS IntelliSense outside of "className"? - StackOverflow
Displaying color boxes next to the TailwindCSS class names indicating the color, anywhere such as in class or className attributes - StackOverflow

Not working TailwindCSS IntelliSense in CSS file

For VSCode to apply TailwindCSS formatting rules, additional configuration is required, as detailed in the documentation.

Unknown at rule @plugin, @custom-variant, @theme in global.css - StackOverflow
How to add a @tailwind CSS rule to CSS checker - StackOverflow
Adding TailwindCSS association to Vue/Svelte/Astro file to disable "css(unknownAtRules): Unknown at rule @apply" - StackOverflow

edited Apr 18 at 13:53

answered Apr 18 at 13:47

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

IgorArnaut Apr 18 at 14:04

I've added this line inside .vscode/settings.json. "tailwindCSS.experimental.configFile": "D:/Documents/_Igor/Tutorijali/_YT/Traversy Media/JS/React Crash Course 2024\react-jobs-2024\tailwind.config.js", The React project was created via Vite.

rozsazoltan Apr 18 at 14:09

I'm not convinced that specifying the full path is a good idea - especially if part of it uses forward slashes and the other part uses backslashes. Use the slashes appropriate for your operating system, or stick to just one type consistently. Within a project, it's sufficient to specify the following starting from the project root: tailwind.config.js (if the file is located in the project root). Or subfolder/tailwind.config.js if it's located in the root/subfolder directory.

rozsazoltan Apr 18 at 14:17

If your workspace root is the react-jobs-2024 folder, then you don't need to use this setting at all - everything will work automatically, and the setting might actually break things.

rozsazoltan Apr 18 at 14:18

However, if your root folder is React Crash Course 2024, then you need to create the setting inside the React Crash Course 2024/.vscode folder with the following value: "tailwindCSS.experimental.configFile": "react-jobs-2024/tailwind.config.js"

IgorArnaut Apr 18 at 16:24

Hey, it worked. Thank you.

|

Collectives™ on Stack Overflow

Tailwind CSS Intellisense autocomplete does not work in React+Vite project

1 Answer 1

`tailwindCSS.experimental.configFile`

Tailwind CSS v3.x and earlier (config files)

Autocomplete everywhere

Not working TailwindCSS IntelliSense in CSS file

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Autocomplete everywhere

Not working TailwindCSS IntelliSense in CSS file

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related