Editor Support

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

You can install it via the Visual Studio Code Marketplace.

Add the following configuration to your .vscode/settings.json file, so that Tailwind directives have proper autocomplete, syntax highlighting, and linting:

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

If you use pnpm, ensure that tailwindcss is installed in your top-level node_modules folder.

Since Tailwind CSS v3.3, ESM/TS configuration has been supported so your editor should automatically configure autocomplete based on your tailwind.config. If you happen to use a lower version and/or require the configuration in CommonJS, you can use the tailwindcss:resolvedConfig hook and a custom Nuxt module:

import { defineNuxtModule, addTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('tailwindcss:resolvedConfig', (config) => {
      addTemplate({
        filename: 'tailwind.config.cjs', // gets prepended by .nuxt/
        getContents: () => `module.exports = ${JSON.stringify(config)}`,
        write: true
      })
    })
  }
})

// ...
+ "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
"files.associations": {
    "*.css": "tailwindcss"
},
// ...

This hook allows you to customize your generated template in different ways (e.g., different filename, contents, etc.) through a module. Please be aware that using JSON.stringify will remove plugins from your configuration.