---
title: "Installation"
description: "Add the build plugin and the editor types to a Nuxt or Vite project."
canonical_url: "https://vue-tailwind-block.netlify.app/getting-started/installation"
---
# Installation

> Add the build plugin and the editor types to a Nuxt or Vite project.

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](https://marketplace.visualstudio.com/items?itemName=Vue.volar) VS Code extension and `vue-tsc` 3.2 or newer, for editor types
- ESLint 9 or 10 with flat config, for [linting](https://vue-tailwind-block.netlify.app/guide/linting)

## Install

<tabs>
<tabs-item icon="i-simple-icons-nuxt" label="Nuxt">
<steps>

### Add the package

<code-group>

```bash [pnpm]
pnpm add -D vue-tailwind-block
```

```bash [npm]
npm install -D vue-tailwind-block
```

```bash [yarn]
yarn add -D vue-tailwind-block
```

```bash [bun]
bun add -D vue-tailwind-block
```

</code-group>

### Register the module

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

The module automatically configures the Vite build plugin and injects the
editor types into the `tsconfig` Nuxt generates.

Run `npx nuxi prepare` (or start the dev server), then reload your editor
window (`Cmd/Ctrl + Shift + P` → **Developer: Reload Window**) so the
language server loads the plugin.

</steps>
</tabs-item>

<tabs-item icon="i-simple-icons-vite" label="Vite">
<steps>

### Add the package

<code-group>

```bash [pnpm]
pnpm add -D vue-tailwind-block
```

```bash [npm]
npm install -D vue-tailwind-block
```

```bash [yarn]
yarn add -D vue-tailwind-block
```

```bash [bun]
bun add -D vue-tailwind-block
```

</code-group>

### Register the plugin

Register `tailwindBlock()` **before** `vue()`. Vite runs plugins in order;
the Vue plugin does not recognize `<tailwind>` blocks and must receive the
file after it has been transformed.

```ts [vite.config.ts]
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()],
})
```

<note>

`@tailwindcss/vite` is used with **Tailwind CSS v4**. If your project uses
**Tailwind CSS v3**, omit `@tailwindcss/vite` and configure PostCSS via
`postcss.config.js` as usual.

</note>

### Add the editor types

Add the editor plugin to the `tsconfig` that includes your `.vue` files
(`tsconfig.app.json` in a `create-vue` project, or `tsconfig.json`):

```json [tsconfig.app.json]
{
  "vueCompilerOptions": {
    "plugins": [{ "name": "vue-tailwind-block/volar" }]
  }
}
```

Restart the language server (`Cmd/Ctrl + Shift + P` → **Vue: Restart Vue Language Server**
or **Developer: Reload Window**).

</steps>
</tabs-item>
</tabs>

## Tailwind CSS IntelliSense

The [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
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:

```json [.vscode/settings.json]
{
  "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`:

<code-group>

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

```ts [vite.config.ts]
export default defineConfig({
  plugins: [tailwindBlock({ binding: 'styles' }), vue()],
})
```

```json [tsconfig.app.json]
{
  "vueCompilerOptions": {
    "plugins": [{ "name": "vue-tailwind-block/volar", "binding": "styles" }]
  }
}
```

</code-group>

<warning>

In Vite projects, ensure the same `binding` is configured in both
`vite.config.ts` and your `tsconfig`. In Nuxt, setting it in `nuxt.config.ts`
configures both automatically.

</warning>

## Verify

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

```vue [Card.vue]
<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**).


## Sitemap

See the full [sitemap](https://vue-tailwind-block.netlify.app/sitemap.md) for all pages.