🐛 Tailwind container query variants fail to parse using `@variant`

[jacob-shuman]

Environment information

Details

CLI:
  Version:                      2.5.7
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_DISTRIBUTION:                npm
  BIOME_LOG_PATH:                    unset
  BIOME_LOG_PREFIX_NAME:             unset
  BIOME_LOG_LEVEL:                   unset
  BIOME_LOG_KIND:                    unset
  BIOME_CONFIG_PATH:                 unset
  BIOME_THREADS:                     unset
  BIOME_WATCHER_KIND:                unset
  BIOME_WATCHER_POLLING_INTERVAL:    unset
  NO_COLOR:                     unset
  TERM:                         xterm-256color
  JS_RUNTIME_VERSION:           v24.11.1
  JS_RUNTIME_NAME:              node
  NODE_PACKAGE_MANAGER:         pnpm/11.20.0

Biome Configuration:
  Status:                       Loaded successfully.
  Path:                         biome.json
  Formatter enabled:            true
  Linter enabled:               true
  Assist enabled:               true
  VCS enabled:                  true
  HTML full support enabled:    true

Workspace:
  Open Documents:               0

What happened?

Playground

Biome version 2.5.7 fails to parse Tailwind container query variants when using @variant.

@variant @xl {
  div {
    background: red;
  }
}

Biome will throw noUnknownAtRules if the rule is on:

lint/suspicious/noUnknownAtRules: Unexpected unknown at-rule: xl

Ignoring that doesn't really help since Biome will also throw a parse error specifically because of the prefixed @:

parse: Expected an identifier but instead found '@'.

Expected result

Biome should not throw noUnknownAtRules or a parse error when an @variant arg is prefixed with @.

Temporary Solution

It's not optimal but the issue can for now be circumvented by using @container in favour of @variant e.g.

@container (width > theme(--container-xl)) {
  div {
    background: red;
  }
}

Code of Conduct

• I agree to follow Biome's Code of Conduct

[github-actions]

✅ Organic activity

No automation signals detected in the analyzed events.

View full analysis →

_{This is an automated analysis by AgentScan}

[dyc3]

@ is an invalid character for identifiers in CSS, because its supposed to mark at-rules. But, it seems tailwind's css parser is a bit more lenient.

Would you mind showing this syntax working in a tailwind playground? https://play.tailwindcss.com/

[echocrow]

Would you mind showing this syntax working in a tailwind playground? https://play.tailwindcss.com/

working demo here!
https://play.tailwindcss.com/Jvp5vkpJOX?file=css