You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`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:
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.
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.
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:
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.
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`:
to the block(s) using the tailwindcss plugin.
block (alongside the existing `@angular-eslint/template/attributes-order`
rule).
value + invalid classname) to confirm the rules fire instead of crashing.