tailwindcss-container-queries
tailwindcss-container-queries copied to clipboard
tailwindlabs
dynamic attribute No space
What version of @tailwindcss/container-queries are you using?
0.1.1
What version of Node.js are you using?
v18.19.0
What browser are you using?
Chrome or Whale
What operating system are you using?
osX or windows
Reproduction repository
https://play.tailwindcss.com/4ZDDvrPavL
Describe your issue
To solve this problem, I tried to increase the
_ to __, but it still often does not include spaces when rebuilding.
Hey! Can you provide a real reproduction with the tools you're actually using? In the Tailwind Play you provided the CSS is generated correctly with spaces included:
I'm sorry. It's hard to reenact, so I just roughly used an example
But even in the example, it should have been @4xl:grid-cols- [128px_144px_104px_80px_1fr] but that's too bad
As a result of my checking, the dynamic properties of tailwind with @container query are not generated with spaces included.
@adamwathan i can also confirm this. Also seems problem is with usage of calc. CSS generated looks different in firefox and chrome. I experinced this using nextjs with tailwind and container queries. Using regular breakpoint had no problem.
I was facing an almost identical issue where the class @3xl:[grid-row-end:span_2] was producing grid-row-end: span2; - but after some digging I found that it was due to CloudFlare's auto minifiy feature mistakenly stripping out the white-space between span and 2.
@RunnyYolk Can you tell me which cloudflare option? Are you talking about css minify?