Guide
Linting
Check and fix the classes in a block with your Tailwind ESLint rules.
Tailwind ESLint rules—such as those in
eslint-plugin-better-tailwindcss
or eslint-plugin-tailwindcss—validate
and sort utility classes in code. The ESLint integration passes each entry in
the <tailwind> block through your configured rules and writes reports and
auto-fixes directly back into the YAML.
Setup
Requires ESLint 9 or 10 with flat config (eslint.config.js). Spread
tailwindBlock.configs.recommended after eslint-plugin-vue, then
add your Tailwind rules:
eslint.config.js
import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
import pluginVue from 'eslint-plugin-vue'
import tailwindBlock from 'vue-tailwind-block/eslint'
export default [
...pluginVue.configs['flat/recommended'],
...tailwindBlock.configs.recommended,
{
...betterTailwindcss.configs.stylistic,
settings: {
'better-tailwindcss': { entryPoint: 'src/style.css' },
},
},
]
tailwindBlock.configs.recommended after pluginVue.
ESLint only runs one processor per file extension. The integration wraps
the Vue processor inside its own, allowing both Vue template linting and
YAML block linting to run seamlessly.Auto-fixes
Running eslint --fix applies rule fixes directly inside the YAML block:
- Class ordering: Classes are sorted into official Tailwind order.
- Line wrapping: Rules that enforce maximum line length (such as
better-tailwindcss/enforce-max-line-length) automatically convert long single-line strings into indented YAML list items.
root:
- p-4 flex bg-white
- "@md:flex underline"
root:
- flex bg-white p-4
- "underline"
- "@md:flex"
ESLint checks each entry as a JavaScript string. Any entry containing escape
sequences that would alter its meaning (such as
content-['\201C']) is
safely preserved as written.Custom Rule Matching
By default, any rule with tailwind in its identifier (including
better-tailwindcss/* and tailwindcss/*) is applied to <tailwind>
blocks. To match additional rules or custom plugins, use createConfig:
eslint.config.js
import tailwindBlock from 'vue-tailwind-block/eslint'
export default [
...tailwindBlock.createConfig({ rules: [/tailwind/, 'my-custom-plugin/class-names'] }),
]