Editor Support
Improve your development experience with features such as autocomplete, syntax highlighting, and linting.
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.