---
title: "ESLint"
description: "Nuxt UI ships an ESLint config that checks the Tailwind CSS classes of your app against your theme."
canonical_url: "https://ui.nuxt.com/docs/getting-started/integrations/eslint/vue"
---
# ESLint

> Nuxt UI ships an ESLint config that checks the Tailwind CSS classes of your app against your theme.

> [!NOTE]
> See: /docs/getting-started/integrations/eslint/nuxt
> 
> Looking for the **Nuxt** version?

## Usage

Nuxt UI ships a flat config for ESLint from `@nuxt/ui/eslint`. It is built on [`eslint-plugin-better-tailwindcss`](https://github.com/schoero/eslint-plugin-better-tailwindcss) and reads your stylesheet, so it knows the semantic tokens and your own `@theme`.

### Setup

Install the plugin, with `eslint-plugin-vue` and `typescript-eslint` to parse your `.vue` and TypeScript files:

```bash [pnpm]
pnpm add -D eslint-plugin-better-tailwindcss eslint-plugin-vue typescript-eslint
```

```bash [yarn]
yarn add -D eslint-plugin-better-tailwindcss eslint-plugin-vue typescript-eslint
```

```bash [npm]
npm install -D eslint-plugin-better-tailwindcss eslint-plugin-vue typescript-eslint
```

```bash [bun]
bun add -D eslint-plugin-better-tailwindcss eslint-plugin-vue typescript-eslint
```

Then add the config to your `eslint.config.mjs` with the stylesheet that imports `tailwindcss` and `@nuxt/ui` as its entry point:

```ts [eslint.config.mjs]
import { defineConfig } from 'eslint/config'
import pluginVue from 'eslint-plugin-vue'
import ts from 'typescript-eslint'
import nuxtUI from '@nuxt/ui/eslint'

export default defineConfig(
  ...ts.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: ts.parser
      }
    }
  },
  ...nuxtUI({ entryPoint: 'src/assets/css/main.css' })
)
```

> [!NOTE]
> 
> The Nuxt UI config doesn't set a parser. `eslint-plugin-vue` parses your `.vue` files, the `**/*.vue` block hands their `<script lang="ts">` to `typescript-eslint`, which parses your `.ts` files too.

### Rules

The classes are checked in `class` attributes, `:ui` objects, the `:ui` and `:props` of `<UTheme>` and the `ui` you pass to the Vite plugin.

| Rule | Default | Description |
| --- | --- | --- |
| `no-palette-colors` | `warn` | Raw palette colors and hardcoded colors. `text-gray-500` suggests a semantic token like `text-muted`, `bg-red-500` suggests `bg-error-500` when `error` points at `red`. |
| `no-conflicting-classes` | `warn` | Classes that set the same property in the same list, like `p-2 p-4`. The stylesheet order decides which one wins, not the order you wrote them in. |
| `no-unknown-classes` | `off` | Classes your stylesheet doesn't generate. Classes styled in a `<style>` block or your own CSS are unknown too, list them in `ignore`. |
| `enforce-logical-properties` | `off` | Physical classes on the inline axis like `ml-2` or `text-left`, for apps that support [RTL](https://ui.nuxt.com/docs/getting-started/integrations/i18n/vue#dynamic-direction). |

> [!NOTE]
> 
> `no-palette-colors` and `no-conflicting-classes` have no autofix, the right token or the class to keep depends on what you meant. `enforce-logical-properties` rewrites each class to its logical name.

### Configuration

Change the severity of a rule or ignore classes in the options:

```ts [eslint.config.mjs] {7,8,9,10,11,12}
import { defineConfig } from 'eslint/config'
import nuxtUI from '@nuxt/ui/eslint'

export default defineConfig(
  // Your Vue and TypeScript configs from above
  ...nuxtUI({
    entryPoint: 'src/assets/css/main.css',
    ignore: ['^prose-'],
    rules: {
      'no-unknown-classes': 'warn',
      'no-palette-colors': 'error'
    }
  })
)
```

| Option | Description |
| --- | --- |
| `entryPoint` | The stylesheet that imports `tailwindcss` and `@nuxt/ui`. |
| `files` | The files to lint. Defaults to `.vue` and script files. |
| `colors` | The palette each color alias points at, `{ error: 'red' }`. Set it when you change them in the `ui.colors` of the Vite plugin, the default colors are used otherwise. |
| `ignore` | Classes `no-unknown-classes` leaves alone, as regular expressions. |
| `rules` | The severity of each rule: `off`, `warn` or `error`. |

---

- [eslint-plugin-better-tailwindcss](https://github.com/schoero/eslint-plugin-better-tailwindcss)


## Sitemap

See the full [sitemap](https://ui.nuxt.com/sitemap.md) for all pages.