@media and postcss-nested no longer work in 3.0.24

What version of Tailwind CSS are you using? v3.0.24

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

**What version of Node.js are you using?**v16.0.0

What operating system are you using? macOS

Reproduction URL https://github.com/nghiepit/tailwindcss-3-0-24-bug

Describe your issue My styles

body {
  @apply text-red-500;

  @media (max-width: 1000px) {
    @apply text-green-500; // <== ERROR
    div {
      @apply text-blue-500; // <== ERROR
    }
  }

  div {
    @apply text-yellow-50;
  }
}

// postcss.config.js
module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
  },
};

In the v.3.0.24 will be throw an error

TypeError: Cannot set properties of undefined (setting ‘parent’)

But in the CHANGELOG.md I don’t see any breaking changes.

And in the v.3.0.23 the output correctly:

body {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity))
}

@media (max-width: 1000px) {
  body {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity))
  }

  body div {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity))
  }
}

body div {
  --tw-text-opacity: 1;
  color: rgb(254 252 232 / var(--tw-text-opacity))
}

[chrismlusk]

Thanks for working on this!

However, if the current fix is only available on the insiders build, should this issue be closed? If others aren’t comfortable using the insiders build in production apps, shouldn’t this issue remain open as a signal about this problem specific to v3.0.24?

[thecrypticace]

Okay, it’s still insiders built only — we don’t have a normal tagged release yet where you can override the postcss dependency but the situation itself has been taken care of and it’ll be possible in the future to work around situations like these. Sorry for all the trouble — and thanks again!