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.

Autocomplete

When using strings of Tailwind classes, you can enable IntelliSense suggestions using the editorSupport.autocompleteUtil option. You will have to add the following VSCode setting:

// ...
+ "tailwindCSS.experimental.classRegex": ["tw`(.*?)`", "tw\\('(.*?)'\\)"],
"files.associations": {
    "*.css": "tailwindcss"
},
// ...

Once added, the new utility function can be used as follows, providing IntelliSense suggestions when writing Tailwind classes:

<script setup lang="ts">
const variantClasses = {
  primary: tw`bg-red-400`,
  secondary: tw('bg-green-400')
}
</script>

Load Config File

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 to generate a flat configuration, you can do so using editorSupport.generateConfig option, or 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
      })
    })
  }
})

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.

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