Editor Support

Improve your development experience with features such as autocomplete, syntax highlighting, and linting.


Tailwind provides an extension for Visual Studio Code, which enables advanced features such as autocomplete, syntax highlighting, and linting.

There are a few things you need to keep in mind so that the extension works correctly:

  1. You need to have a tailwind.config.js file in the root of your project, so that the extension gets enabled. You can create the file using npx tailwindcss init. The file can have another name, such as tailwind.config.cjs in which case you have to configure the extension so that it picks up the new name:
.vscode/settings.json
"tailwindCSS.experimental.configFile": "tailwind.config.cjs"

If you have multiple Tailwind config files, you can use the array syntax:

.vscode/settings.json
"tailwindCSS.experimental.configFile": {  "themes/simple/tailwind.config.js": "themes/simple/**",  "themes/neon/tailwind.config.js": "themes/neon/**"}
  1. The tailwind configuration file must not have any TypeScript or ESM syntax in the file. That means that you have to use CommonJS exports and can't use a tailwind.config.ts file with TypeScript syntax. See tailwindlabs/tailwindcss-intellisense#348 (comment).
  2. Add the following configuration to your .vscode/settings.json file, so that Tailwind directives have proper autocomplete, syntax highlighting, and linting:
.vscode/settings.json
"files.associations": {    "*.css": "tailwindcss"}