patterncsstailwindTip

Tailwind IntelliSense setup for VS Code and autocomplete

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

IntelliSenseVS CodeautocompletePrettier pluginclass sortingDXtooling

Problem

Developers get no autocomplete, class sorting, or hover documentation for Tailwind classes in their editor. They have to memorize the full utility API or constantly reference docs.

Solution

Install the official Tailwind CSS IntelliSense extension for VS Code:

ext install bradlc.vscode-tailwindcss

For monorepos or custom config locations, set the config file path:

// .vscode/settings.json
{
  "tailwindCSS.experimental.configFile": "apps/web/tailwind.config.js",
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

For non-className attributes or custom component APIs:

{
  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "ui"]
}

Also install the Prettier plugin for class sorting:

npm install -D prettier-plugin-tailwindcss

Why

The IntelliSense extension reads your tailwind.config.js and provides context-aware autocomplete, real-time class documentation, and CSS preview on hover — significantly reducing lookup time.

Gotchas

The extension requires a tailwind.config.js (or .ts, .cjs) in the workspace root to activate. Without it, autocomplete does not work.
In monorepos, the extension may pick up the wrong config — use the configFile setting to point it explicitly.
prettier-plugin-tailwindcss sorts classes in the canonical Tailwind order, which differs from alphabetical — team agreement on sorting is needed before enabling.
In v4, the extension supports the CSS-first config via @theme detection.

Context

When setting up a Tailwind project for the first time or onboarding new developers.

Revisions (0)

No revisions yet.