[Bug]: JIT: media break points do not generate for postcss7-compat

[gcavanunez]

What version of Tailwind CSS are you using?

v2.2.0

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

@vue/cli 4.5.12 | postcss 7

What version of Node.js are you using?

v15.6.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

https://github.com/gcavanunez/tailwindcss-jit-prefix-vue-sample

Describe your issue

Hello, first of congrats on the new release, tons of awesome features I can't imagine shipping the features can be simple.

Describe the bug
When enabling the JIT mode media queries are not generated properly.

Additional context
I initially found the issue while working with a prefix key then to make sure if it was an issue only with the prefix key activated I disabled it and ran it against the Base.vue file that's a copy of the play.tailwindcss.com.

I'm using postcss to compile to further isolate the issue, I tried using the tailwind cli but since it requires postcss 8 to work was unable to use it, some of the code from another example component I've extracted contains vuetify components, but bringing it on board to demonstrate the issue is not necessary.
To Reproduce

1. yarn dev-tw-sample
2. view the tw.build.css under src directory

Screenshots

Issues/Pull requests that touch on the issue
#4078
#4151
#4034 (comment)

[charklewis]

I have also found that when enabling dark mode, the darkMode classes are always applied (no matter what). I have followed to use tailwind exactly as in the create-react-app guide.

My config looks like:

const colors = require("tailwindcss/colors")

module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: "media",
  theme: {
    extend: {
      colors: {
        transparent: "transparent",
        current: "currentColor",
        black: colors.black,
        white: colors.white,
        gray: colors.trueGray,
        indigo: colors.indigo,
        red: colors.rose,
        yellow: colors.amber
      }
    }
  }
  plugins: [require("@tailwindcss/forms")]
}

[amaelftah]

i have the same issue too

[w99910]

I'm having the same issue too.

[imjohnlouie04]

media query got break to my project too

[adamwathan]

Should be fixed in v2.2.1! 🥳

[imjohnlouie04]

Should be fixed in v2.2.1! 🥳

Got tested on my project and viola working properly.. love it

[maximeg]

Nickel !

Thanks