What version of Tailwind CSS are you using?

v3.2.1

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

webpack 5.74.0

What version of Node.js are you using?

v16.18.0

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

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

Describe your issue

When adding rules with multiple selectors in a plugin, the generated CSS for the !important modifier can cause issues. The !important rule includes all selectors from the original rule, even those which don't include the modified class.

For example, when adding a utility or component with these rules

'.btn': {
     '&.disabled, &:disabled': {
         color: 'gray',
     }
}

the following CSS is generated

.btn.disabled, .btn:disabled {
  color: gray;
}

.btn.\!disabled, .btn:disabled {
  color: gray !important;
}

but I think the following makes more sense

.btn.disabled, .btn:disabled {
  color: gray;
}

.btn.\!disabled {
  color: gray !important;
}

The workaround in this case is straightforward, just splitting the rule in two.

'.btn': {
     '&.disabled': {
         color: 'gray',
     },
    '&:disabled': {
         color: 'gray',
     }
}