What version of @tailwindcss/container-queries are you using?

v0.1.1

What version of Node.js are you using?

v18.16.0

What browser are you using?

Chrome v112.0.5615.137

What operating system are you using?

macOS v13.1 (22C65)

Tailwind Play Reproduction

https://play.tailwindcss.com/iyNosSvgd1

Describe your issue

Purpose / Problem

There currently exists no way AFAIK to use the dynamic breakpoints functionality newly introduced in TailwindCSS v3.2, or anything comparable when it comes to container queries.

There is this arbitrary syntax supported: @[17.5rem]:underline however…

• no max- equivalent exists
• the syntax for this departs a bit from the core non-container-related implementation of min-*

Proposed Solution

It might be helpful to follow the core implementation's lead by adding support for min-* and max-* dynamic breakpoints for arbitrary values:

<div class="@container grid h-screen w-screen">
  <div class="bg-[red] @min-[1px]:bg-[green]"></div>
  <div class="bg-[red] @max-[1px]:bg-[green]"></div>
</div>

This way, it works identically to the core implementation but is prepended with @, which is already being used by this plugin to denote container-related queries.

Support for width/height distinction

Furthermore, per a related PR to the core implementation to add support for an explicit w:/h: prefix to the arbitrary value to determine the dimension (e.g. min/max-width/height), implementing the same pattern could be helpful here if that PR passes, which could work like this:

<!--
  `w:` is implied when no `w:`/`h:` prefix is specified,
  but it can also be included explicitly, optionally
-->
<div class="@min-[h:100px]:@max-[100px]:font-bold" />

Syntax consideration

It may be worth considering which of these syntaxes makes more sense in line with the core implementation:

@ before min/max

(as shown above)

• @min-[1px]:
• @min-[w:1px]:
• @min-[h:1px]:
• @max-[100vw]:
• @max-[w:100vw]:
• @max-[h:100vw]:

@ before […]

(as shown above)

• min-@[1px]:
• min-@[w:1px]:
• min-@[h:1px]:
• max-@[100vw]:
• max-@[w:100vw]:
• max-@[h:100vw]: