Bug: Parsing error: Semicolon or block is expected when using Tailwind

[loganmzz]

Environment

ESLint version: 9.39.4
@eslint/css version: 0.14.1
Node version: 24.9.0
npm version: 11.6.0
Operating System: linux 5.15.167.4-microsoft-standard-WSL2

Which language are you using?

stylesheet

What did you do?

I'm developing an Angular application using Tailwind for styling.

I setup ESLint CSS Language Plugin as mentioned in README / npmjs;

Configuration

import css from '@eslint/css';
import { tailwind4 } from 'tailwind-csstree';

export default [
  ...,
  {
    files: ["**/*.css"],
    language: "css/css",
    languageOptions: {
      customSyntax: tailwind4,
    },
    plugins: { css },
  },
];

Here a component CSS example:

.container {
  @apply outline rounded-sm p-3 grid grid-cols-[200px_auto] gap-2;
}

When I run eslint I got (point to [, same issue on :):

error  Parsing error: Semicolon or block is expected

What did you expect to happen?

No parsing error.

What actually happened?

error  Parsing error: Semicolon or block is expected

Link to Minimal Reproducible Example

https://stackblitz.com/edit/stackblitz-starters-vyr3rjv8

Participation

• I am willing to submit a pull request for this issue.

AI acknowledgment

• I did not use AI to generate this issue report.
• (If the above is not checked) I have reviewed the AI-generated content before submitting.

Additional comments

N/A

[Tanujkanti4441]

Hi @loganmzz, thanks for the issue.

I could reproduce this locally, and it can be resolved by adding languageOptions: { tolerant: true } to the ESLint config.

To know more about this => https://github.com/eslint/css?tab=readme-ov-file#tolerant-mode

Please share if this solves your issue.

[DMartens]

The problem seems to be that tailwind-csstree has no support for properties with square brackets.
So the parser assumes a new declaration or selector with [ as the start token which fails.
Could you please file an issue in tailwind-csstree for this?

[loganmzz]

@DMartens I have created two issues:

• Support condition (:) humanwhocodes/tailwind-csstree#39
• Support square bracket notation humanwhocodes/tailwind-csstree#40