Tailwind CSS IntelliSense

Install the extension via the Visual Studio Code Marketplace.

To activate the extension, you must have tailwindcss installed in your workspace and meet one of the following criteria:

• For v4 and later: A .css file that imports a Tailwind CSS stylesheet (e.g., @import "tailwindcss").
• For v3 and earlier: A Tailwind CSS config file named tailwind.config.{js,cjs,mjs,ts,cts,mts} in your workspace, or a stylesheet that points to a config file via the @config directive.

Install the @tailwindcss/language-server package globally using npm to provide Language Server Protocol (LSP) support for Tailwind CSS.

npm install -g @tailwindcss/language-server

To optimize the extension experience, apply these recommended settings in your VS Code configuration:

1. Enable Tailwind CSS mode for all CSS files: Use files.associations to ensure .css files are treated with Tailwind IntelliSense.
2. Enable autocomplete in strings: By default, VS Code may not trigger completions inside strings (like JSX attributes). Set editor.quickSuggestions to enable this.

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

Start the Tailwind CSS Language Server using the tailwindcss-language-server command. You can specify the communication protocol using the following options:

• --stdio: Use standard input/output (default for many LSP clients).
• --node-ipc: Use node-ipc.
• --socket=<port>: Use a specific socket port.

If the extension fails to auto-detect your project, use tailwindCSS.experimental.configFile to manually define entrypoints or config files.

For Tailwind CSS v4.x (CSS entrypoints):

• Use a string for a single entrypoint.
• Use an object to map entrypoint files to glob patterns for multiple entrypoints.

For Tailwind CSS v3.x and earlier (Config files):

• Use a string for a single config file.
• Use an object to map config files to glob patterns for multiple configs.

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

// v3 example: Multiple configs
"tailwindCSS.experimental.configFile": {
  "themes/simple/tailwind.config.js": "themes/simple/**",
  "themes/neon/tailwind.config.js": "themes/neon/**"
}

Enable or disable linting via tailwindCSS.validate. You can configure individual rules using tailwindCSS.lint.[ruleName]. Supported levels are ignore, warning, and error.

Available rules:

• invalidScreen: Unknown screen name in @screen directive.
• invalidVariant: Unknown variant name in @variants directive.
• deprecatedAtRule: Deprecated Tailwind CSS at-rules.
• invalidTailwindDirective: Unknown value in @tailwind directive.
• invalidApply: Unsupported use of @apply directive.
• invalidConfigPath: Invalid path in theme helper.
• cssConflict: Duplicate CSS properties on the same element.
• recommendedVariantOrder: Variants not in recommended order (JIT mode only).
• usedBlocklistedClass: Usage of classes blocklisted via @source not inline(...).
• suggestCanonicalClasses: Usage of non-optimal class forms.

If IntelliSense features are not activating, check the following:

1. Verify Installation: Ensure tailwindcss is installed via npm, pnpm, or yarn in your workspace.
2. Check Project Type Requirements:
   • v4: Requires a .css file with @import "tailwindcss";. Preprocessors like Less or Sass are not supported.
   • v3: Requires a tailwind.config.{js,cjs,mjs,ts,cts,mts} file or an @config directive in a stylesheet.
3. Check Exclusions: Ensure your files aren't being hidden by files.exclude, files.watcherExclude, or tailwindCSS.files.exclude.
4. Inspect Logs: Run the Tailwind CSS: Show Output command to view the language server log for errors.
5. Explicit Configuration: If using multiple installations or complex setups, use tailwindCSS.experimental.configFile to explicitly define your paths.

Define regex patterns for functions or tagged template literals where Tailwind class completions should be provided. Matches are limited to the function names themselves.

{
  "tailwindCSS.classFunctions": ["tw", "clsx", "tw\\.[a-z-]+"]
}

Add additional language support by mapping a language ID to a built-in language type (e.g., html, css, or javascript).

{
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}

When calling createResolver, you can provide the following options:

• root: (string) The root directory for the resolver.
• pnp: (boolean | PnpApi) If true, the resolver attempts to load the PnP API. If an object is provided, it uses that specific PnpApi instance.
• tsconfig: (boolean | TSConfigApi) If true, the resolver looks for tsconfig files to resolve module paths. If an object is provided, it uses that specific TSConfigApi instance.
• fileSystem: (FileSystem) A custom filesystem to use for resolution. If omitted, a CachedInputFileSystem is created internally.

Access these commands via the VS Code Command Palette:

• Tailwind CSS: Show Output: Reveals the language server log panel. This is useful for debugging activation issues. Available only when a language server is active.
• Tailwind CSS: Sort Selection (pre-release): Sorts a selected list of CSS classes in the same order used by Tailwind CSS. Requires tailwindcss version 3.0.0 or greater and an active Tailwind project.