Arbitrary values are not applied when using the `@md:`/`@xs:`/etc. container size classes

[revosw]

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

0.1.1

What version of Node.js are you using?

19.3.0

What browser are you using?

Microsoft Edge 112.0.1722.34

What operating system are you using?

Windows

Reproduction repository

https://github.com/revosw/tailwindcss-container-query-arbitrary-repro/tree/main

Describe your issue

Arbitrary values are not applied when using the @md:/@xs:/etc. container size classes.

StackBlitz repro link (Be sure to click "open in new tab" in the top right, or else images won't load and the example doesn't properly show the problem)

Expected:

Actual:

[adamwathan]

Hey! It's generating the CSS properly, the issue is you are using @container on the same element as @md:grid-cols-[300px_1fr]. Elements using container queries have to be descendants of a container.

Here's a version where it works, just by adding another element and hoisting @container up to that element:

https://play.tailwindcss.com/kBBag9d8Bd