@media and postcss-nested no longer work in 3.0.24

[nghiepdev]

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? [email protected]

**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))
}

[thecrypticace]

Hey! A PostCSS bug around this was fixed in 8.4.13. Are you certain you're using 8.4.13? I just tested your code on a brand new project and it's working as expected. Can you provide a reproduction repo by chance?

[nghiepdev]

@thecrypticace I'm using [email protected].
I just updated the repository reproduction.

[thecrypticace]

Ah okay so sorry. I know what's going on here. I was compiling using the PostCSS CLI. In this case the issue is because we have a built-in version of postcss that's being used and it does not pick up the local postcss install when using the tailwindcss CLI. In the short term you can use the insiders build which builds in the fixed version of postcss: npm install tailwindcss@insiders

We're discussing this internally to figure out the best solution here around postcss updates in the CLI — I'll leave this open as a reminder for us to figure that out.

[nghiepdev]

Thanks. I will waiting for a new release to fix this issue.

[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!

[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?

[alexcracea]

Started reproducing this issue after upgrading an existing project from tailwindcss@2 to tailwindcss@3 @thecrypticace are there any updates on this matter? We don't use the insider build but rather fixed this issue with a package.json resolution, but that doesnt seem like a proper way to fix it