Fix Tailwind v4 IntelliSense not working in VS Code

TL;DR#

Tailwind v4 IntelliSense needs an installed Tailwind package and a CSS entrypoint that imports Tailwind. A current extension normally detects that file automatically. Add the missing CSS import before trying an explicit entrypoint setting. If manual completion works inside className but the pop-up stays hidden while typing, enable quick suggestions for strings. Creating a dummy v3 configuration file does not address either problem.

The original Stack Overflow report followed this installation command in a Vite project:

npm install tailwindcss @tailwindcss/vite

The reporter described missing suggestions and autocompletion, with no error message. That is a symptom to diagnose, rather than a compiler error with one universal remedy. Installing packages alone does not establish the stylesheet entrypoint that the extension needs.

Why it happens#

The extension's installation requirements distinguish the two configuration systems. Tailwind v4 uses a CSS file importing Tailwind. Tailwind v3 uses a JavaScript or TypeScript configuration file, or a stylesheet pointing to that configuration. Consequently, a v4 project can legitimately have no tailwind.config.js at all.

The v4 language server scans CSS files to identify the root entrypoint. It then needs to associate the document you are editing with a Tailwind project before it can answer class-completion requests. A stylesheet containing only ordinary CSS supplies no Tailwind import to discover. A monorepo can have a different difficulty: several valid entrypoints exist, but the edited file needs the right theme. Both cases are project-detection problems.

There is also an independent editor setting. VS Code's IntelliSense settings disable automatic quick suggestions inside strings by default. A JSX attribute value is string content. The language server can therefore be working while the automatic suggestion widget remains absent. Testing manual completion separates that situation from a language server that has no matching project.

The distinction was reproduced on Tailwind CSS 4.3.3 and Tailwind language server 0.16.0, in the official Node Docker image, on 9 October 2026. A small protocol client opened an HTML file and requested class completions directly from the server. The same installed packages, same document, and same server version returned no completions with plain CSS, then returned Tailwind classes after a single import was added. This tests language-server discovery and completion responses; the VS Code pop-up behaviour below follows the editor documentation and was not reproduced through its interface.

Fix#

1. Confirm the extension and local package are available#

Install or enable the official Tailwind CSS IntelliSense extension, linked from Tailwind's editor setup page. Open the folder containing your application so its package installation and CSS are inside the workspace. In that application's terminal, inspect the actual dependency:

npm ls tailwindcss

Read the resolved version before following configuration advice. This article addresses v4; a project deliberately using v3 has different entrypoint requirements. If Tailwind is absent, install the dependencies required by your chosen integration. For the Vite setup in the source report, the installation command above is the documented starting point. If the packages are already installed correctly, reinstalling them adds no missing CSS import.

Check the extension's state separately from the application build. A working browser page proves the build pipeline can generate and load CSS; it does not prove the editor has associated your component with the intended Tailwind project. Conversely, class suggestions alone do not prove that Vite is processing your stylesheet.

2. Give v4 a real CSS entrypoint#

Locate the stylesheet your app actually loads. In this example it is src/app.css. At the top, add the Tailwind import if it is missing:

@import "tailwindcss";

Keep the application's existing CSS beneath that line. Do not create an unused stylesheet solely to satisfy the editor: the same entrypoint should belong to the build you intend to use. In a Vite app, follow the Vite installation steps for registering the Tailwind Vite plugin and loading the stylesheet. The import above supplies the CSS entrypoint; plugin registration supplies build integration.

Use a .css file for this v4 entrypoint. The extension's troubleshooting documentation excludes Sass, Less and Stylus entrypoints for v4. A file called app.scss does not become a supported Tailwind entrypoint merely because it contains a similar-looking import.

This step also matters if you are about to initialise shadcn/ui. Its “No Tailwind CSS configuration found” preflight check checks the package declaration and stylesheet content itself. Fixing the entrypoint can address both checks, but a successful shadcn preflight is a separate result from editor completion.

3. Pin the CSS path only when discovery needs help#

First try the valid entrypoint with automatic detection. If the language-server output shows that the wrong stylesheet is selected, or discovery still cannot find the project, use the documented entrypoint setting. For a workspace with one entrypoint, merge this into .vscode/settings.json:

{
  "tailwindCSS.experimental.configFile": "src/app.css"
}

Replace the path with the existing CSS file for your app. In an ordinary folder workspace, the path is relative to the workspace folder. The setting points at the stylesheet, not at vite.config.ts, a package manifest, or a new v3 configuration file. Its purpose is to tell the extension which existing Tailwind entrypoint to use; it cannot repair a stylesheet whose Tailwind import is absent or cannot be resolved.

For a multi-root workspace saved as a workspace file, relative explicit paths use that workspace file's directory as their base, as implemented in the language server's path resolution. Check that base before copying a folder-workspace example into shared workspace settings.

4. Enable automatic suggestions only after testing manual completion#

Inside a supported class or className value, type a partial utility such as bg- and run Trigger Suggest. The VS Code IntelliSense documentation gives Ctrl+Space as the Windows and Linux shortcut. If Tailwind utilities appear manually but do not appear while you type inside JSX strings, merge this into the applicable settings:

{
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

This changes when the editor displays suggestions. It does not change the Tailwind theme or select a CSS project. Preserve existing quick-suggestion settings for other content, and check any language-specific settings if the problem affects TSX but not HTML. If manual completion also fails, return to detection and document mapping; enabling automatic pop-ups cannot manufacture missing language-server results.

Verify the fix#

Run Tailwind CSS: Show Output from the command palette and inspect the selected entrypoint, loaded Tailwind version, and any import errors. The command is available only when a language-server instance is active, so its absence is useful evidence that activation has not reached that point. Avoid treating an empty suggestion list as proof that your package installation is broken.

In the Docker reproduction, the client printed these summaries for the same HTML completion request before and after adding the CSS import:

COMPLETIONS src/index.html: 0; bg-red-500=false; bg-alpha=false; bg-beta=false
COMPLETIONS src/index.html: 23632; bg-red-500=true; bg-alpha=false; bg-beta=false

Those counts describe the protocol response, not the number of items VS Code displays after filtering. The useful result is that a known Tailwind utility became available. The successful automatic-discovery run had no JavaScript configuration file and no explicit entrypoint setting. A separate run pointing explicitly at the same CSS file also returned the utility.

In your editor, confirm a standard utility completes in the affected file and hover over it to check the CSS preview. If the project has a custom theme colour, test its utility too. Standard classes appearing with the wrong custom classes suggests a project-selection problem rather than a general failure to provide suggestions.

Finally run the app's normal build and inspect the rendered result. If that now fails with the message about using Tailwind directly as a PostCSS plugin, continue with the Tailwind v4 PostCSS integration fix. That error belongs to stylesheet compilation, so changing suggestion settings will not resolve it.

Two CSS themes in one workspace#

For multiple entrypoints, the setting takes an object. Each key identifies a Tailwind CSS entrypoint, and each value gives the source-file glob, or array of globs, it should serve:

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

Use this form when two packages need different themes. Mapping both to an overly broad source pattern makes the intended ownership unclear. Include the actual component directories in each glob: a mapping confined to one package cannot provide that project's completions to a component outside the mapped tree.

The reproduction gave package A a custom colour named alpha and package B a colour named beta. With the object mapping above, the server returned these results:

COMPLETIONS packages/a/src/index.html: 23683; bg-red-500=true; bg-alpha=true; bg-beta=false
COMPLETIONS packages/b/src/index.html: 23683; bg-red-500=true; bg-alpha=false; bg-beta=true

Both files received standard Tailwind classes, while each received only its own custom colour. That is a more useful check than seeing a suggestion widget open: it verifies that the file is connected to the intended CSS theme.

Legacy configuration and hidden stylesheets#

The old v3 workaround in the source discussion creates tailwind.config.js. Current v4 configuration does not require that file. Tailwind's upgrade guide explains that JavaScript configuration remains supported for compatibility but is no longer detected automatically by Tailwind v4. If you retain a real legacy theme, loading it with the CSS config directive is a migration decision, separate from selecting the entrypoint for IntelliSense. If completion works but a required utility is absent from production CSS, replace the legacy safelist with complete source tokens or bounded inline declarations rather than creating a dummy configuration file.

If autocomplete works but compilation says Cannot apply unknown utility class border-border, the border-border troubleshooting page covers loading or migrating that custom theme. Adding an empty configuration file will not create the missing colour definition.

Before escalating a detection failure, inspect files.exclude, files.watcherExclude and tailwindCSS.files.exclude for rules hiding your stylesheet. The extension explicitly names these settings in its troubleshooting instructions. Narrow an exclusion only if it matches the real source file; excluding generated folders is not a reason to expose every dependency directory. Keep the valid CSS import, the correct document mapping and the manual-completion result as separate checks, so each change answers a specific failure you observed.

Further reading: Google Fonts not working in Tailwind + Vite: @import order. Also see Tailwind upgrade: Could not load the configuration file.