Bug: some text content can trigger multiple Tailwind builds in the same output css

[matthewcc]

What version of Tailwind CSS are you using?

v3.0.16 (also saw on v3.0.15)

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

Just Tailwind.

What version of Node.js are you using?

v16.13.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://github.com/matthewcc/tailwind3-duplicates

Describe your issue

Modifiers (such as pseudo-classes) followed by an asterisk appear to trigger additional instances of "tailwindcss v3.x.x" being inserted into the outputted css file.

In our case, we had things like sm:* and focus:* as text included in a Storybook mdx file as documentation. This mdx file also has jsx with actual Tailwind classes, so we need it added to the content property in the Tailwind config. This triggered some extra builds (located in the same css output file), and aside from just extra lines some of our own styles lost priority to re-inserted default Tailwind styles. There are additional notes in the Read Me in the reproduction link.

We've changed the text that triggered this issue in our files in the meantime and it's possibly an edge case, but we wanted to share it.

Big fans of Tailwind, thanks for your work.