[Bug]: In CRA projects, Breakpoints not working when [JIT] mode is on

[wonderfulxue]

What version of Tailwind CSS are you using?

v2.1.0

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

Create React App

What version of Node.js are you using?

v12.14.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/wonderfulxue/tailwind-jit-bug

Describe your issue

In the CRA bootstrapped project, when turn on the JIT mode, the breakpoints of Tailwind CSS is not working. However, when JIT mode is off, the breakpoints work just fine.

See the bug details at: https://github.com/wonderfulxue/tailwind-jit-bug

[EmanuilGerganov]

Same problem in Nuxt 2.15.3.
Breakpoints not working even without jit turned on.

[casbloem]

I have the same issue. When JIT is on, it creates the class but it doesn't put the class inside a @media breakpoint. When I turn off JIT its working fine.

[wonderfulxue]

Updates:

Just tested on the newly released 2.1.2 version of tailwindcss, media query still not working.

You can repro the issue with: https://github.com/wonderfulxue/tailwind-jit-bug/tree/2.1.2

[rahulsuresh-git]

+1 facing the same issue.

[trainto]

I'm using Next.js and facing the same issue.
Especially when deploying via Vercel, media query not working.

[bradlc]

Hey @wonderfulxue. You didn't quite update tailwindcss correctly. You can see this if you run yarn list --pattern tailwindcss:

yarn list v1.22.4
├─ @tailwindcss/[email protected]
└─ [email protected]

I would recommend running the following commands:

yarn remove tailwindcss @tailwindcss/postcss7-compat
yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat

The installation documentation previously said to install both tailwindcss@npm:@tailwindcss/postcss7-compat and @tailwindcss/postcss7-compat, but you should only need the former.

For anyone else having a similar issue: please check that the version you are using is actually 2.1.2. Again, I would recommend reinstalling the @tailwindcss/postcss7-compat package, aliased to tailwindcss (see above)

[wonderfulxue]

Hi @bradlc, thank you for pointing out my mistake! I just tried on the "real" tailwindcss v2.1.2, and media query worked great!

I have updated the README of my repo: https://github.com/wonderfulxue/tailwind-jit-bug.

Close the issue.