Installation

A project needs two pieces: the build plugin, which turns each block into classes, and the editor plugin, which tells the editor and vue-tsc what classes holds. In Nuxt, the module sets up both.

Requirements

• Vue 3.3 or newer
• Nuxt 3.10 or newer, or Vite 5 or newer
• Tailwind CSS v3 or v4
• Vue - Official VS Code extension and vue-tsc 3.2 or newer, for editor types
• ESLint 9 or 10 with flat config, for linting

Install

pnpm add -D vue-tailwind-block

npm install -D vue-tailwind-block

yarn add -D vue-tailwind-block

bun add -D vue-tailwind-block

export default defineNuxtConfig({
  modules: ['vue-tailwind-block/nuxt'],
})

pnpm add -D vue-tailwind-block

npm install -D vue-tailwind-block

yarn add -D vue-tailwind-block

bun add -D vue-tailwind-block

import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import tailwindBlock from 'vue-tailwind-block/vite'

export default defineConfig({
  // tailwindBlock() must come before vue()
  plugins: [tailwindBlock(), vue(), tailwindcss()],
})

{
  "vueCompilerOptions": {
    "plugins": [{ "name": "vue-tailwind-block/volar" }]
  }
}

Tailwind CSS IntelliSense

The Tailwind CSS IntelliSense extension only inspects standard class attributes by default. Add this setting to .vscode/settings.json so it scans <tailwind> blocks for autocomplete, color swatches, and hovers:

{
  "tailwindCSS.experimental.classRegex": [
    ["<tailwind[^>]*>([\\s\\S]*?)</tailwind>", "(?:^|\\n)[ \\t]*(?:-[ \\t]+|[^\\s:#\"'][^:\\n]*:[ \\t]+)[\"']?([^\\n#\"']+)"]
  ]
}

Renaming the variable (binding)

By default, the block compiles to a variable called classes. If a prop or another identifier already uses that name, customize it with binding:

export default defineNuxtConfig({
  modules: ['vue-tailwind-block/nuxt'],
  tailwindBlock: {
    binding: 'styles',
  },
})

export default defineConfig({
  plugins: [tailwindBlock({ binding: 'styles' }), vue()],
})

{
  "vueCompilerOptions": {
    "plugins": [{ "name": "vue-tailwind-block/volar", "binding": "styles" }]
  }
}

Verify

Add a block to any component and use classes in its template:

<template>
  <div :class="classes.root">
    <slot />
  </div>
</template>

<tailwind lang="yaml">
root: rounded-lg border p-6 shadow-sm
</tailwind>

If the card renders with styling, the build plugin is active. If your editor underlines classes as undefined:

1. Verify the component uses <script setup lang="ts"> (in plain JavaScript, classes is typed as any).
2. Verify that your tsconfig includes the .vue file and contains the vueCompilerOptions.plugins entry.
3. In Nuxt, run npx nuxi prepare.
4. Restart the language server (Vue: Restart Vue Language Server).