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. Currently, Tailwind does not support a configuration file in TypeScript or ESM syntax format. To workaround this limitation, and also include configuration from other places, the module automatically generates a configuration file in CommonJS format in the .nuxt folder. You need to change your VSCode settings to point to the generated config file.
    .vscode/settings.json
    "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs"
  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"
    }