@apply not working reliably in plugins since since 3.x

[ccaspers]

What version of Tailwind CSS are you using?

For example: v3.0.12

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

• vue-cli 5.0.0-rc.1
• webpack 5.64.4
• postcss 8.4.5
• postcss-loader 6.2.1

What version of Node.js are you using?

For example: v16.13.0

What browser are you using?

• Firefox
• Chrome

What operating system are you using?

Linux

Reproduction URL

https://play.tailwindcss.com/wUdEGR484y?file=config

Describe your issue

In a project I am currently working on, we rely on tailwind plugins to organize certain CSS styles. These plugins reuse Tailwind classes via @apply rules in JavaScript like this:

const plugin = require("tailwindcss/plugin");

module.exports = plugin(({ addUtilities }) => {
  const myUtils = {
    ".util": {
      "@apply text-red-500": {},
    },
    "@screen sm": {
      ".util": {
        ["@apply text-green-500"]: {},
      },
    },
  };
  addUtilities(myUtils);
});

We are currently migrating to Tailwind 3 which broke some of the styles that were created using @apply in plugins. Please have a look at the linked reproduction in Tailwind Play (thx to @crswll for helping me with this)

[thecrypticace]

This looks to have been fixed in #6999. The release fixing this will go out tomorrow.

[ccaspers]

That's great news. Thank you very much.