Skip to content

Optimizer warns on valid @position-try at-rule #20275

Description

@dorianmariecom

What version of Tailwind CSS are you using?

v4.3.1

I reproduced this with the standalone CLI distributed through tailwindcss-ruby 4.3.1. This project also has tailwindcss@4.3.1 installed via npm.

What build tool are you using?

Tailwind CLI directly:

tailwindcss -i input.css -o output.css --minify

The same warning also appears with --optimize.

What version of Node.js are you using?

Not using a Node-based build in the reproduction. This came from a Rails app using tailwindcss-rails 4.6.0 / tailwindcss-ruby 4.3.1.

What browser are you using?

N/A, build-time warning.

What operating system are you using?

macOS arm64.

Reproduction URL

No repo needed; this reproduces with a single input file:

@import "tailwindcss";

.foo {
  position-try-fallbacks: --flip-above;
}

@position-try --flip-above {
  top: auto;
  bottom: 0;
}

Run:

tailwindcss -i input.css -o output.css --minify

Describe your issue

Tailwind's optimizer emits a warning for @position-try:

Found 1 warning while optimizing generated CSS:

│   position-try-fallbacks: --flip-above;
│ }
│ @position-try --flip-above {
┆              ^-- Unknown at rule: @position-try
┆
│   top: auto;
│   bottom: 0;

Done in 102ms

The command exits successfully and the at-rule is preserved in the output CSS, but the warning is noisy for valid CSS Anchor Positioning syntax.

This shows up in a real app when importing intl-tel-input/styles from intl-tel-input@29.1.1, which includes this rule for a detached country selector fallback:

.iti--detached-country-selector {
  top: calc(anchor(bottom) + 3px);
  left: anchor(left);
  position-try-fallbacks: --iti-flip-above;
}
@position-try --iti-flip-above {
  top: auto;
  bottom: calc(anchor(top) + 3px);
}

Expected behavior: Tailwind's optimization/minification should not warn on @position-try, or should otherwise expose a way to avoid warning on newer standards-based at-rules that are intentionally passed through.

If this belongs upstream in Lightning CSS rather than Tailwind, guidance would be appreciated.

Metadata

Metadata

Assignees

No one assigned

    Labels

    upstreamIssues that need to be fixed in upstream providers (e.g. lightningcss, vite, `@parcel/watcher`).

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions