Not detecting class names with template literals

[harryzcy]

What version of Tailwind CSS are you using?

v3.0.5

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

Vite 2.7.2 8.3.1, postcss 8.4.5, autoprefixer 10.4.0

What version of Node.js are you using?

v16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

When class names are contained in template literal strings, they are not picked up by the parser unless a trailing space is supplied. The template literals are common when using frameworks like React.

In the following example, 'overflow-scroll' is not picked up:

<div className={`overflow-scroll${conditionIsOpen ? '' : ' hidden'}`}></div>

This workaround works:

<div className={`overflow-scroll ${conditionIsOpen ? '' : ' hidden'}`}></div>

But it will result in an extra space between class names.

[u3u]

Maybe it's a related issue, there's a similar issue in Vue JSX

// Not working
<div class={['w-[92%] max-w-[650px] mx-auto']}></div>
<div class={clsx(['w-[92%] max-w-[650px] mx-auto'])}></div>

// Working
<div class="w-[92%] max-w-[650px] mx-auto"></div>

Two days ago tried to upgrade to v3, because of this problem had to go back to v2

[lukewarlow]

I'm not 100% sure but a fix at least for the first issue could be a change to the below regex (from line 24 of expandTailwindAtRules.js)

Current:

const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g

Proposed:

const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%$:]/g

As I say I'm not actually sure if it's that block of code that's got the parsing issue with regards to template strings, but changing the regex does seem to match more properly in RegExr.

Though that wouldn't explain the Vue JSX issue above.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

The issue will be fixed in #6593 and will be available in the next release.