Bug: @theme inline At-rule '@theme' should not contain a prelude

[SalahAdDin]

Environment

Environment Info:

Node version: v24.14.1
npm version: v11.11.0
Local ESLint version: v10.2.0 (Currently used)
Global ESLint version: Not found
Operating System: linux 6.18.19-amd64-desktop-rolling

Which language are you using?

stylesheet

What did you do?

Configuration

  {
    files: ["**/*.astro"],
    extends: [betterTailwindcss.configs.recommended],
    settings: {
      "better-tailwindcss": {
        entryPoint: "./src/styles/global.css",
        detectComponentClasses: true,
      },
    },
    languageOptions: {
      parser: parserAstro,
      parserOptions: {
        parser: tseslint.parser,
      },
    },
    rules: {
      "@stylistic/arrow-parens": "warn",
      "@stylistic/jsx-one-expression-per-line": "off",
      "@stylistic/member-delimiter-style": "warn",
      "@stylistic/multiline-ternary": "warn",
      "@stylistic/quotes": "warn",
      "@stylistic/semi": "warn",
    },
  },
  {
    files: ["**/*.css"],
    plugins: { css },
    extends: ["css/recommended"],
    language: "css/css",
    languageOptions: {
      customSyntax: tailwind4,
    },
  },

:root {
  --accent-foreground: var(--color-neutral-900);
  --background: var(--color-slate-50);
  --foreground: var(--color-neutral-950);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --card: var(--color-white);
}

[data-theme="dark"] {
  --accent-foreground: var(--color-neutral-100);
  --background: var(--color-slate-900);
  --foreground: var(--color-neutral-50);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --card: var(--color-slate-800);
}

@theme {
  --breakpoint-sm: 22.8125rem; /* 365px */
  --breakpoint-md: 48rem; /* 768px */
  --breakpoint-lg: 64rem; /* 1024px */
  --breakpoint-xl: 90rem; /* 1440px */
  --breakpoint-2xl: 96rem; /* 1536px */

  --color-secondary: #212e80;
  --color-primary: #c13026;
  --color-neutral-sand: #f6f5f1;

  --container-8xl: 88rem; /* 1408px */
  --container-90rem: 90rem; /* 1440px */
  --container-9xl: 96rem; /* 1536px */
}

@theme inline {
  --color-accent-foreground: var(--accent-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-card: var(--card);
}

What did you expect to happen?

It should not give any linting issues when using @theme inline for Tailwind configuration.

What actually happened?

When we want to have a color for both light and dark themes, we need to define it in @theme inline as the docs say, code above.

Linting does give the next bug:

❯ pnpm eslint src/styles/global.css

/home/LuisAlaguna/Projects/central-mosque-bogota/frontend/src/styles/global.css
  46:1   error  At-rule '@theme' should not contain a prelude          css/no-invalid-at-rules

@theme already gives an issue without this package; now we have found this issue.

Link to Minimal Reproducible Example

https://github.com/SalahAdDin/central-mosque-bogota/tree/main/frontend

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

We already opened an issue on tailwind-csstree.

[DMartens]

The problem seems to be the definition of the atrule @theme which does not allow a prelude.
The rule no-invalid-at-rules works in this case correctly.
I am keeping this issue open, so that we add an additional test case for this scenario when tailwind-css is updated.