---
title: "Linting"
description: "Check and fix the classes in a block with your Tailwind ESLint rules."
canonical_url: "https://vue-tailwind-block.netlify.app/guide/linting"
---
# 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](https://github.com/schoero/eslint-plugin-better-tailwindcss)
or [eslint-plugin-tailwindcss](https://github.com/francoismassart/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:

```js [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' },
    },
  },
]
```

<important>

Always place `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.

</important>

## 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.

<code-group>

```yaml [Before]
root:
  - p-4 flex bg-white
  - "@md:flex underline"
```

```yaml [After eslint --fix]
root:
  - flex bg-white p-4
  - "underline"
  - "@md:flex"
```

</code-group>

<note>

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.

</note>

## 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`:

```js [eslint.config.js]
import tailwindBlock from 'vue-tailwind-block/eslint'

export default [
  ...tailwindBlock.createConfig({ rules: [/tailwind/, 'my-custom-plugin/class-names'] }),
]
```


## Sitemap

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