[lint] Biome doesn't support Tailwind v4 syntax

[sattarrasouli]

Link to the code that reproduces this issue

https://github.com/sattarrasouli/nextjs-15.5-issue-biome.git

To Reproduce

npm install
npm run lint

Current vs. Expected behavior

test-15.5@0.1.0 lint
biome check

src/app/globals.css:8:2 lint/suspicious/noUnknownAtRules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✖ Unexpected unknown at-rule: theme

 6 │ }
 7 │ 

8 │ @theme inline {
│ ^^^^^
9 │ --color-background: var(--background);
10 │ --color-foreground: var(--foreground);

ℹ theme is not a standard CSS at-rule, which may lead to unexpected styling results or failure to interpret the styles as intended.

ℹ See MDN web docs for a known list of at-rules.

ℹ To fix this issue, consider removing the unknown at-rule.

Checked 8 files in 3ms. No fixes applied.
Found 1 error.
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✖ Some errors were emitted while running checks.

Provide environment information

Apple mac book m2 pro

Which area(s) are affected? (Select all that apply)

CSS and biome

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

i've just comment out this part @theme in globals.css, lint passed
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}

[bennajah]

same issue here: #82823

[Jayllyz]

Biome v2.2 doesn't support Tailwind syntax yet, please read this issue : biomejs/biome#7223

[sattarrasouli]

it's installed by default.
they have to fix it.

[JesseKoldewijn]

This is tailwind syntax and the error is thrown in biome, so not related to Next.js itself 😉

[sattarrasouli]

npx create-next-app install them all together
don't you think nextjs should take care of it?

[JesseKoldewijn]

No due to the following:

• It's not a build-in from Next.js
• It's not maintained by the Next.js core team
• There's an open issue on biome's side already

Edit: Had to double-check as I don't create new projects too often recently. But Biome is still not present by default, it does get offered in the CLI together with Tailwind. So there's plenty of options too that won't run into this issue 👍

[icyJoseph]

Alright, it does look like there's upstream work ongoing, close to being merged: biomejs/biome#7164

I'll add the upstream label for now.

I guess for the time being you can modify biome.json to:

  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "suspicious": {
        "noUnknownAtRules": "warn"
      }
    },
    "domains": {
      "next": "recommended",
      "react": "recommended"
    }
  },

But I'd recommend against this kind of patching, maybe other maintainers disagree.

[alonsourena]

The next branch have the changes already, once it gets merged to main, we can add this configuration to our biome config file.

"css": {
    "parser": {
      "tailwindDirectives": true
    }
   }