Skip to content

fix eslint-plugin-tailwindcss config #11

Description

@draylegend

What's wrong

`eslint.config.ts` registers `eslint-plugin-tailwindcss` and its rules
(`classnames-order`, `no-arbitrary-value`, `no-custom-classname`,
`no-contradicting-classname`) but the setup is broken in two ways:

  1. Missing required setting. The plugin's README states
    `settings.tailwindcss.cssConfigPath` is mandatory ("REQUIRED, as the
    default value may not work out-of-the-box") — it's not set anywhere in
    `eslint.config.ts`. Without it, the plugin guesses the Tailwind v4 CSS
    entry path itself, and guesses wrong: it looked for
    `apps/app/src/style.css` (singular) when the real file is
    `apps/app/src/styles.css` (plural). Any rule that needs the compiled
    theme (`no-arbitrary-value`, `no-custom-classname`,
    `classnames-order`) throws `ENOENT` the moment it actually runs against
    a classname.

  2. Not wired to `.html` files. The tailwindcss plugin/rules only live in
    the `files: ['/*.ts', '/*.js']` block. This app's Angular templates
    are external `.html` files (e.g. `apps/app/src/app/app.html`), so that's
    where `class="..."` attributes actually live — but the rules never run
    there today. This currently masks bug update eslint-plugin-tailwindcss #1: nothing has crashed lint yet
    only because the rules never touch a real classname.

Confirmed by temporarily adding the plugin to a `**/*.html` block and
running `nx run app:lint` against a test template with
`class="p-[13px] hidden block text-red-500 not-a-real-class"` — it threw:

```
NX ENOENT: no such file or directory, open '...\apps\app\src\style.css'
Rule: "tailwindcss/no-custom-classname"
```

Note: the plugin does support Angular templates (visits the
`TextAttribute` node from `@angular-eslint/template-parser`, and its
default `attributes` setting already includes `class`, `className`,
`ngClass`, `@apply`), so no Angular-specific workaround is needed — just
correct config.

Fix

In `eslint.config.ts`:

  • Add `settings: { tailwindcss: { cssConfigPath: './apps/app/src/styles.css' } }`
    to the block(s) using the tailwindcss plugin.
  • Add the `tailwindcss` plugin + its 4 rules to the `files: ['**/*.html']`
    block (alongside the existing `@angular-eslint/template/attributes-order`
    rule).
  • Re-verify with the same repro above (a test template with an arbitrary
    value + invalid classname) to confirm the rules fire instead of crashing.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions