Tailwind CSS v4 IntelliSense Fix in VSCode

Problem Statement

After installing Tailwind CSS v4 (released January 2025) in Visual Studio Code projects using Vite or other build tools, users encounter an issue where the Tailwind CSS IntelliSense extension no longer provides auto-suggestions, autocompletion, or syntax highlighting for Tailwind classes. The extension fails silently without error messages, disrupting development workflows.

This occurs because Tailwind v4 replaces the traditional tailwind.config.js file with a CSS-first configuration approach, which wasn't initially compatible with the VSCode extension. Configuration information is now stored directly in CSS files using @tailwind directives, confusing legacy versions of the extension.

Primary Solution (Easiest Fix)

1. Update the IntelliSense extension to >= v0.14.3 (fixed support for v4 in February 2025):

   • Open VSCode Extensions (Ctrl+Shift+X)
   • Search for "Tailwind CSS IntelliSense"
   • Click "Update" or uninstall/reinstall if no update is available

2. Configure the CSS entrypoint in your VSCode settings:

   • Press Ctrl+Shift+P → Type "Preferences: Open Settings (JSON)"
   • Add this to your settings.json:

     // Single CSS entrypoint:
     "tailwindCSS.experimental.configFile": "src/path/to/your/tailwind.css"

   • For monorepos (multiple entrypoints):

     "tailwindCSS.experimental.configFile": {
       "packages/ui/src/app.css": "packages/ui/src/**",
       "apps/web/src/styles.css": "apps/web/src/**"
     }

3. Restart VSCode

Alternative Valid Solutions

Remove Outdated Settings (Prevent Conflicts)

If you upgraded from v3, remove legacy configuration references:

// REMOVE this line from settings.json if present:
"tailwindCSS.experimental.configFile": "./tailwind.config.js"

Temporary Config Workaround

For projects where automatic detection fails:

1. Create tailwind.config.js in project root:

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

2. Reference it in settings.json:

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

3. Restart VSCode

Key Explanations

• CSS Entrypoint Configuration: Tailwind v4 uses CSS files (not JS) for configuration. The extension now requires explicit paths to these files.
• Extension Requirements: v0.14.3+ is essential for v4 support. Older versions can't parse the new CSS-based structure.
• Preprocessor Limitations: Tailwind v4 drops Sass/Less/Stylus support—IntelliSense ignores preprocessor files.
• Project Structure: Monorepos need explicit path mappings so the extension knows which CSS rules apply where.

Verification Tips

1. Check the Tailwind CSS output channel in VSCode (View → Output → Tailwind CSS)
2. Confirm the extension uses your CSS file (not JS configs) for suggestions
3. Ensure your Tailwind directives (@tailwind base, etc.) exist in the specified CSS file

// Minimal working configuration (adjust paths to match your project)
{
  "tailwindCSS.experimental.configFile": "src/styles/globals.css"
}

/* Tailwind v4 directives must exist in this file */
@tailwind base;
@tailwind components;
@tailwind utilities;

Note: Avoid downgrading Tailwind or the extension unless absolutely necessary. The CSS-first approach is the official direction for Tailwind v4.

For ongoing updates, consult the Tailwind CSS IntelliSense GitHub repository.