addComponents strips out classes when using media queries and breakpoint prefixes.

What version of Tailwind CSS are you using?

3.0.22

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

Next.js 12.0.10

What version of Node.js are you using?

v14.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

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

Describe your issue

I’m trying to update my plugin to fix some bugs and support version 3 (https://www.npmjs.com/package/tailwind-container-break-out), but it seems that the addComponents and addUtiliites methods aren’t working with media queries? I’ve done endless debugging and still can’t pinpoint it, but I’m thinking it might have something to do with the classes’ prefixedIdentifier not being unique?

Using the addUtilties method adds the multiple versions of the CSS declarations with nested media queries, and using addComponents seems to strip out other versions of the class if they are prefixed with .sm:\\ , .md:\\ etc.

I have basically replicated the way that the .container class works in TailwindCSS core, but adding media queries. It seemed to work in the previous version, although I was using addUtilities, and this was still adding nested media queries.

[adamwathan]

Yeah that’s intended in the sense that we haven’t bothered to optimize it away 👍🏻 It is still totally valid CSS and does what you’d expect.

Going to close this since it sounds like it’s figured out!

[LucidNinja]

Ok perfect! This has definitely solved my problem. That said - even in your example it seems to be producing nested media queries, which I’m not sure is intended behaviour (even though it’s working). If you inspect the md:container-half or lg:container-half classes, you’ll see that it’s producing something like this:

@media (min-width: 768px)
@media (min-width: 1024px)
.md\:container-half {
    width: calc(1024px / 2);
}

However, this is the same if you use Tailwind’s core container class when prefixed with a breakpoint:

@media (min-width: 1024px)
@media (min-width: 1536px)
.lg\:container {
    max-width: 1536px;
}

I’m not sure if this is intended?