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
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
the following CSS is generated
but I think the following makes more sense
The workaround in this case is straightforward, just splitting the rule in two.
The text was updated successfully, but these errors were encountered: