---
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/nuxt"
---
# 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/vue
> 
> Looking for the **Vue** version?

## Usage

Nuxt UI adds its config to the one [`@nuxt/eslint`](https://eslint.nuxt.com) generates. It is built on [`eslint-plugin-better-tailwindcss`](https://github.com/schoero/eslint-plugin-better-tailwindcss) and reads your stylesheet and your `app.config.ts`, so it knows the semantic tokens, your own `@theme` and the palette each color alias points at.

### Setup

Install the plugin next to `@nuxt/eslint`:

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

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

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

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

Then enable it with the `ui.eslint` option in your `nuxt.config.ts`:

```ts [nuxt.config.ts] {4,5,6}
export default defineNuxtConfig({
  modules: ['@nuxt/eslint', '@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    eslint: true
  }
})
```

The stylesheet of `css` that imports Tailwind CSS is used as the entry point.

> [!NOTE]
> 
> If your `eslint.config.mjs` already registers `eslint-plugin-better-tailwindcss`, the config isn't added and a warning tells you why. Remove your setup to use this one instead, both at once make ESLint fail. When the plugin comes from a shared config you import, it can't be detected: leave `ui.eslint` off to keep it.

### Rules

The classes are checked in `class` attributes, `:ui` objects, the `:ui` and `:props` of `<UTheme>` and the `ui` of your `app.config.ts`.

| 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/nuxt#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

Pass an object to `ui.eslint` to change the severity of a rule or to ignore classes:

```ts [nuxt.config.ts] {4,5,6,7,8,9,10,11}
export default defineNuxtConfig({
  modules: ['@nuxt/eslint', '@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    eslint: {
      ignore: ['^prose-'],
      rules: {
        'no-unknown-classes': 'warn',
        'no-palette-colors': 'error'
      }
    }
  }
})
```

| Option | Description |
| --- | --- |
| `entryPoint` | The stylesheet that imports `tailwindcss` and `@nuxt/ui`. Defaults to the one found in `css`. |
| `files` | The files to lint. Defaults to `.vue` and script files. |
| `colors` | The palette each color alias points at, `{ error: 'red' }`. Read from the `ui.colors` of your `app.config.ts` and its layers by default, a value that isn't a plain string is left out. |
| `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.