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.

String Classes 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\\('(.*?)'\\)", "tw\\(\\s*('(.*?)'|\"(.*?)\")\\s*\\)"],
"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>

Configuration IntelliSense

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 have a complex Nuxt project with multiple Tailwind configurations that are within layers, passed from hooks or inline nuxt.config and want to use a merged configuration, the module generates it in .nuxt/tailwind.config.cjs that you can use by adding the following VSCode setting:

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

If you require more customisation to what configuration the IntelliSense extension reads, you can take advantage of hooks, especially the tailwindcss:resolvedConfig hook that runs the configuration through tailwindcss/resolveConfig to provide the complete config object.

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

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('tailwindcss:resolvedConfig', (config) => {
      addTemplate({
        filename: 'intellisense-tw.cjs', // gets prepended by .nuxt/
        getContents: () => `
          /* my-comment */
          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.