Type checking

The editor and vue-tsc read the block directly to type the classes object—no build step required.

Setup

Setup is automatic in Nuxt via the module. In Vite projects, ensure the Volar plugin is registered in your tsconfig as shown in Installation.

Autocomplete & Hover

classes contains the exact keys defined in your block, and each leaf property is typed as string.

• Autocomplete: Typing classes. in either <template> or <script setup> immediately suggests all defined keys and groups.
• Hover previews: Every key is typed with a JSDoc tooltip containing the exact compiled Tailwind classes.

For this block:

root: inline-flex items-center rounded-md
variants:
  solid: bg-sky-600 text-white hover:bg-sky-500
  outline: border border-zinc-300 hover:bg-zinc-50

const classes: {
  root: string
  variants: {
    solid: string
    outline: string
  }
}

(property) solid: string
// bg-sky-600 text-white hover:bg-sky-500

A key that is not in the block is a type error, in both the template and the script. This includes any prop union used as a dynamic index:

<script setup lang="ts">
const props = defineProps<{ variant: 'solid' | 'outline' | 'ghost' }>()
</script>

<template>
  <!-- error: 'ghost' is not a key of classes.variants -->
  <button :class="classes.variants[props.variant]" />
</template>

Index checking requires strict mode in tsconfig, which create-vue and Nuxt enable by default.

Diagnostics

Problems in the block are highlighted directly on the YAML:

• YAML syntax errors (such as duplicate keys or bad indentation) underline the specific line.
• Invalid values (such as an empty key or unsupported scalar) underline the block and name the path in the message.
• Unsupported lang attributes (anything other than yaml or yml) underline the block.

While a block has errors, classes falls back to any so that diagnostics are reported once on the block itself, rather than cascading as errors across every template reference.

Troubleshooting

If classes is underlined as an unknown variable in your editor:

1. Verify language: Ensure the component has <script setup lang="ts">.
2. Verify TSConfig: Check that your tsconfig covers the .vue file and includes "plugins": [{ "name": "vue-tailwind-block/volar" }].
3. Restart Language Server: In VS Code, open the Command Palette (Cmd/Ctrl + Shift + P) and run Vue: Restart Vue Language Server or Developer: Reload Window.
4. Nuxt: Run npx nuxi prepare to regenerate .nuxt/tsconfig.json.

CI

vue-tsc loads the same plugin, so the same errors fail CI builds:

pnpm vue-tsc --noEmit