Dynamic nested groups names webpack error

[bstivenprz]

What version of Tailwind CSS are you using?

I'm using the latest v3.2.4

What build tool (or framework if it abstracts the build tool) are you using?

I'm using Next.js (v13.1.1) with Webpack (v5.74.0)

What version of Node.js are you using?

v18.12.1

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

CodeSandbox bug repoduction

Describe your issue

I tried to assign names to groups by props dynamically on runtime but it failed to compile with this message:

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[11].use[2]!./styles/globals.css TypeError: Cannot read properties of undefined (reading '5') at resolveMatches.next (<anonymous>) at Function.from (<anonymous>) at runMicrotasks (<anonymous>)

When i concatenate the id prop to a group with + operator this error don't come up but nested group doesn't work. I tried every plugin out there but nothing worked naming groups dynamically by props.

[adamwathan]

Hey! You can’t use concatenation or interpolation to create class names, as Tailwind generates all of your styles at build time and needs to be able to statically extract every class you’re using from your templates:

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

It shouldn’t cause the build to fail or crash though, so will definitely look into that.

[adamwathan]

Here's a super minimal reproduction that triggers the error even in Play:

https://play.tailwindcss.com/s8ydiMPxcN

[bstivenprz]

Hey! Thanks for that information, i do a little change and it's working now.

[adamwathan]

Going to keep this open so we can diagnose the crash 👍🏻

[thecrypticace]

This was partially fixed in the insiders build already as we now skip rules with unparsable selectors. But this shouldn't have been unparsable. We weren't escaping things when we needed to nor handling those escapes properly. Both of which we now do!

I've merged the fix for this in #10276 and it'll be available in our next release. In the meantime you can test it with our insiders build which should be available in a few minutes: npm install tailwindcss@insiders

Thanks for reporting this!