Use Logical Properties for v4 Container Queries

[OverflowCat]

v4 introduces container queries using the @container at-rule. However, the current implementation has a limitation.

Consider this example:

<div class="@container">
  <div class="@max-md:text-red-500">
    test
  </div>
</div>

This generates the following CSS:

.\@container {
  container-type: inline-size;
}
.\@max-md\:text-red-500 {
  @container (width < 28rem) {
    color: var(--color-red-500);
  }
}

Notice that container-type only supports size, inline-size, and normal – logical values, but the generated container query uses the physical width property.

Proposal

Why not use logical properties directly within the container query? Instead of width < 28rem, we could generate @container (inline-size < 28rem).

Reasons

• Browser Support: Browsers that support container queries also inherently support logical properties.
• Consistency: Tailwind CSS has already embraced logical properties by replacing -x and -y with -inline and -block in PR Use inline and block for x/y utilities #14805. This change aligns with that direction.
• Improved Flexibility: Using logical properties would make container queries more adaptable to different writing modes and layout directions.

This change would require that #13389 be modified, though. cc @adamwathan and @brandonmcconnell