Next - Webpack5 JIT not rendering new values

What version of Tailwind CSS are you using?

3.0.11

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

Next.js + Webpack on a monorepo

What version of Node.js are you using?

Next: 11.1.3. -> Webpack 5 mode Node: 14.16.1

What browser are you using? Chrome

What operating system are you using? MacOS

Reproduction URL

https://github.com/dailydotdev/apps -> You can choose the GitPod version from this repo.

Describe your issue

When we switched to webpack 5 we started seeing “new classes” and “arbitrary” values not reflecting on reload.

Example: Open > packages/shared/src/components/MainLayout.tsx and add an arbitrary value like h-[15px] on the header. (line 130).

You will see the classname gets added, but the styles don’t reflect this value. The same happens when you use classes that we haven’t used before in the project. (Like h-96 for instance)

What does work Often it does work when we stop the server and restart it. This is not solid.

A full fix that works:

• Stop server
• Remove .next cache
• Restart server

Also when reverting back to webpack 4 it has zero issues to render these values.

Other impact This often also impacts builds that might miss these values for some reason, haven’t been able to re-create a stable reproduction of this yet.

[drewlustro]

@dgurns – It’s well-documented that interpolated strings in tailwind classes do not work.

[dgurns]

Thank you, sorry I had missed that.