[JIT] not working with @craco/craco

[createdbymahmood]

What version of Tailwind CSS are you using?

2.1.0

What version of Node.js are you using?

12.20.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

https://github.com/createdbymahmood/craco-tailwindcss-problem

I'm using TailwindCSS with craco, to support "css modules apply syntax", in addition, I want to use "Just-in-time", it does not work as expected, styles are not getting compiled fine. only tailwind base styles (normalizers) are available to use now.

[devpeerapong]

I think JIT doesn't support PostCSS 7

[sveisvei]

Indeed, the provided reproduction repository does have the Postcss 7:
https://github.com/createdbymahmood/craco-tailwindcss-problem/blob/main/package-lock.json#L2029

[bradlc]

Hey @createdbymahmood, two things:

1. You need to upgrade tailwindcss to 2.1.2 – there was a bug relating to PostCSS 7 which was fixed in Fix media queries with jit and postcss7 #4078:

npm uninstall @tailwindcss/postcss7-compat tailwindcss
npm install tailwindcss@npm:@tailwindcss/postcss7-compat

2. You need to specify your template paths in the purge option of your tailwind.config.js file. Without this the JIT engine does not know which classes to generate. For example:

module.exports = {
  purge: ['./src/**/*.js'],
  // ...
}

I have opened a pull request on your reproduction repository and confirmed that it's now working 👍 Any other issues let us know!

[M0hammedImran]

Hey @createdbymahmood, two things:

1. You need to upgrade tailwindcss to 2.1.2 – there was a bug relating to PostCSS 7 which was fixed in Fix media queries with jit and postcss7 #4078:

npm uninstall @tailwindcss/postcss7-compat tailwindcss
npm install tailwindcss@npm:@tailwindcss/postcss7-compat

1. You need to specify your template paths in the purge option of your tailwind.config.js file. Without this the JIT engine does not know which classes to generate. For example:

module.exports = {
  purge: ['./src/**/*.js'],
  // ...
}

I have opened a pull request on your reproduction repository and confirmed that it's now working 👍 Any other issues let us know!

This worked for me. I had a relatively old project and just installed tailwind and JIT is the best thing that happened to tailwind after v2.0.