can't use arbitrary group selectors with group labels that contains $ character

[sibbng]

Reproduction URL

https://play.tailwindcss.com/3uWb41wv5q

Describe your issue

Hi, I was testing the changes in #10276 and it seems that the first group in the following code does not generate the related classes:

<!-- doesn't work -->
<div class="group/${id} foo">
  <div class="group-[.foo]/${id}:bg-gray-300">group-[.foo]/${id}:bg-gray-300</div>
</div>

<!-- works -->
<div class="group/{id} foo">
  <div class="group-[.foo]/{id}:bg-gray-300">group-[.foo]/{id}:bg-gray-300</div>
</div>

To be honest, I'm surprised to see Tailwind support this kind of use case. I would expect to see a convention like; "Only alphanumeric group labels supported.". Since the use case mentioned in the original issue misunderstood the way how Tailwind works, I would expect this issue to be fixed by just fixing the compiler error rather than generating a "false positive"(?) I guess.

Also, it seems #10276 trying to balance brackets. In my opinion, balanced shouldn't be a must. For example, the following code is should be totally valid and generate corresponding classes if special characters are allowed in group labels, but it doesn't.

<div class="group/{id foo">
  <div class="group-[.foo]/{id:bg-gray-300">group-[.foo]/{id:bg-gray-300</div>
  <!--                        ^ second bracket is removed -->
</div>

[jalalmanafi]

Is this issue solved? @reinink

[reinink]

Hey folks! My apologies on the delay here — I started looking into this back in January, which led to some internal discussions, but it never went anywhere from there.

So you're right, currently it's not possible to use a $ character in group names. The changes in #10276 weren't intended to make this possible, but rather to fix an issue where the build was failing if you did use a $ in a group name. We've fixed things so that the build no longer crashes, but Tailwind still doesn't see this as a valid class.

We could potentially make this possible, but for now we've opted to limit the allowed characters here to keep our parser sane to work with. We can't allow just any character in the group names, as some characters of course have special meaning in Tailwind. For example, you couldn't use the : character as that's the separator we use to determine class modifiers like screen sizes, hover, focus, etc.

While changing this behavior isn't something that we're able to prioritize right now, I've made a note about this internally as we're already having some discussions about permitted class name characters as we look ahead to the next version of Tailwind, so I'm certain this will get brought up as we work through that.

One final consideration — please keep in mind that you cannot use string interpolation or concatenate partial class names together when working with Tailwind — Tailwind will not find them and therefore will not generate the corresponding CSS. Meaning dynamically generating named group classes using group/${id}, where the ${id} piece is swapped out dynamically with a real value, will not work. This is something that's covered in our documentation: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Hope that helps!