<h1>How to Fix Tailwind CSS v4 IntelliSense in VS Code &amp; Cursor</h1>
A complete guide to restoring autocomplete and suggestions after upgrading to Tailwind v4
<hr>
<h2>The Problem</h2>
After upgrading to Tailwind CSS v4 (released January 2025), many developers report that VS Code and Cursor IntelliSense no longer provides autocomplete suggestions for Tailwind classes. You type <code>className=&quot;bg-</code> and nothing pops up. The extension is installed, but it feels broken.
<h2>Why This Happens</h2>
Tailwind v4 introduced a fundamental architectural change:
| Tailwind v3 | Tailwind v4 |
|-------------|-------------|
| JavaScript config (<code>tailwind.config.js</code>) | CSS-first configuration |
| Extension auto-detected config file | No centralized config to detect |
| IntelliSense “just worked” | Extension can’t find where Tailwind lives |
The Tailwind CSS IntelliSense extension traditionally relied on <code>tailwind.config.js</code> to understand your project structure and which classes are available. With v4’s CSS-first approach—using <code>@import &quot;tailwindcss&quot;</code> and directives like <code>@theme</code> directly in your CSS—that file no longer exists. The extension doesn’t know which CSS file contains your Tailwind setup or which source files to scan for classes.
<h2>Prerequisites</h2>
Before troubleshooting, ensure:
<ol>
<li>Tailwind CSS IntelliSense extension is installed (by Tailwind Labs)</li>
<li>Your extension version is 0.14.3 or higher (required for v4 support)</li>
<li>Your CSS file uses <code>@import &quot;tailwindcss&quot;</code> (v4 syntax, not <code>@tailwind base</code> from v3)</li>
</ol>
<hr>
<h2>Solution 1: Configure the Experimental Config File</h2>
The extension includes an experimental setting that lets you explicitly point to your Tailwind CSS file.
<h3>Single Project Setup</h3>
If your workspace root is the project folder (e.g. you opened <code>my-react-app</code>):
<code>.vscode/settings.json</code> in your project root:
<pre><code>{
 &quot;tailwindCSS.experimental.configFile&quot;: &quot;src/index.css&quot;,
 &quot;editor.quickSuggestions&quot;: {
 &quot;strings&quot;: true
 }
}
</code></pre>
Replace <code>src/index.css</code> with the path to your CSS file containing <code>@import &quot;tailwindcss&quot;</code>.
<h3>Multi-Project / Monorepo Setup</h3>
If your workspace root is a parent folder containing multiple projects (e.g. you opened <code>my-repos</code>):
<code>.vscode/settings.json</code> at the workspace root:
<pre><code>{
 &quot;tailwindCSS.experimental.configFile&quot;: {
 &quot;path/to/project/src/index.css&quot;: &quot;path/to/project/src/**&quot;
 },
 &quot;editor.quickSuggestions&quot;: {
 &quot;strings&quot;: true
 }
}
</code></pre>
Example for a repo structure like <code>Web-Dev/React/04bgChanges/</code>:
<pre><code>{
 &quot;tailwindCSS.experimental.configFile&quot;: {
 &quot;React/04bgChanges/src/index.css&quot;: &quot;React/04bgChanges/src/**&quot;
 },
 &quot;editor.quickSuggestions&quot;: {
 &quot;strings&quot;: true
 }
}
</code></pre>
The object maps: CSS file path → glob of files where Tailwind classes appear.
<hr>
<h2>Solution 2: Enable Quick Suggestions for Strings</h2>
JSX/TSX files sometimes don’t trigger IntelliSense inside <code>className=&quot;&quot;</code> by default. Add:
<pre><code>&quot;editor.quickSuggestions&quot;: {
 &quot;strings&quot;: true
}
</code></pre>
This enables suggestions when typing inside string literals, including <code>className=&quot;...&quot;</code>.
<hr>
<h2>Solution 3: Place Settings in the Right Location</h2>
Critical: <code>.vscode/settings.json</code> is only loaded from the workspace root. If you open a parent folder, a <code>.vscode</code> inside a subfolder is ignored.
| Workspace you opened | Where to put settings |
|----------------------|------------------------|
| <code>C:\Projects\MyApp</code> (your project) | <code>MyApp/.vscode/settings.json</code> |
| <code>C:\Projects\Web-Dev</code> (parent of many projects) | <code>Web-Dev/.vscode/settings.json</code> |
Use paths relative to the workspace root in your config.
<hr>
<h2>Solution 4: Verify Your CSS File</h2>
Your Tailwind entry CSS should look like this for v4:
<pre><code>@import &quot;tailwindcss&quot;;

:root {
 /* your custom styles */
}
</code></pre>
Common issues:
<ul>
<li>Using old v3 syntax (<code>@tailwind base; @tailwind components; @tailwind utilities;</code>) — update to <code>@import &quot;tailwindcss&quot;</code></li>
<li>Codemod-upgraded CSS with subtle corruption — if you migrated from v3, try rewriting the file from scratch</li>
<li>Filename edge cases — some users reported issues with names like <code>tailwindcss.css</code>; <code>index.css</code> or <code>style.css</code> tend to work reliably</li>
</ul>
<hr>
<h2>Troubleshooting Checklist</h2>
<ol>
<li>Reload the window</li>
</ol>
<code>Ctrl+Shift+P</code> (or <code>Cmd+Shift+P</code> on Mac) → Developer: Reload Window
<ol>
<li>Restart Extension Host</li>
</ol>
<code>Ctrl+Shift+P</code> → Developer: Restart Extension Host
<ol>
<li>Check extension output</li>
</ol>
<code>Ctrl+Shift+P</code> → Tailwind CSS: Show Output
Look for “No matching project” or config-detection errors.
<ol>
<li>Manually trigger suggestions</li>
</ol>
Place cursor inside <code>className=&quot;|&quot;</code> and press <code>Ctrl+Space</code>.
<ol>
<li>Update the extension</li>
</ol>
Extensions → Tailwind CSS IntelliSense → ensure it’s 0.14.3+.
<ol>
<li>Open the project folder directly</li>
</ol>
If you use a parent folder as workspace, try opening only the project folder (e.g. <code>04bgChanges</code>) and use <code>src/index.css</code> in your config.
<hr>
<h2>Summary</h2>
| Step | Action |
|------|--------|
| 1 | Use Tailwind CSS IntelliSense 0.14.3+ |
| 2 | Add <code>tailwindCSS.experimental.configFile</code> pointing to your CSS file |
| 3 | Add <code>editor.quickSuggestions.strings: true</code> |
| 4 | Put settings in <code>.vscode/settings.json</code> at the workspace root |
| 5 | Use paths relative to workspace root |
| 6 | Reload the window or restart Extension Host |
With these steps, Tailwind v4 IntelliSense should work again, and you can keep using the CSS-first approach without a <code>tailwind.config.js</code> file.
<hr>
<h2>References</h2>
<ul>
<li><a href="https://tailwindcss.com/docs" target="_blank" rel="noopener nofollow">Tailwind CSS v4 Documentation</a></li>
<li><a href="https://github.com/tailwindlabs/tailwindcss-intellisense" target="_blank" rel="noopener nofollow">Tailwind CSS IntelliSense GitHub</a></li>
<li><a href="https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1233" target="_blank" rel="noopener nofollow">IntelliSense v4 Issue #1233</a></li>
</ul>