For Nuxt and Vite, with Tailwind CSS v3 and v4
Tailwind classes in a YAML block
A <tailwind> block for Vue single file components. It keeps long class lists out of the template, gives them a typed classes object, and compiles away at build time.
pnpm add -D vue-tailwind-block
npm install -D vue-tailwind-block
yarn add -D vue-tailwind-block
bun add -D vue-tailwind-block
Nuxt module
One line in modules sets up the build and the editor types.
Vite plugin
Compiles each block into a plain object at build time. No YAML parser reaches the browser.
Volar plugin
The Vue extension and vue-tsc flag keys that are not in the block, and show a key's classes on hover.
ESLint
The Tailwind ESLint plugin you already use checks the block and fixes it in place.
This page is styled with a <tailwind> block. See it on GitHub