resolves: #198

So, what do we have.

Several cases affected the styles rendering here, and their influence isn't obvious:

1. Since the word "container" is present on the page, Tailwind generates a whole class for it, thinking it's being used. This is described in their documentation, so it's worth keeping in mind that this is normal for Tailwind.
2. The example also involves classes that depend on breakpoints, such as md:p-7.

Let's consider what classes Tailwind generates based on the markup described in the test.

.container {
    width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

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

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

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

.hidden {
    display: none;
}

.text-\[\#ccc\] {
    color: rgb(204, 204, 204);
}

@media (min-width: 640px) {
    .sm\:block {
        display: block;
    }
}

Now let's see how the classes for the nonMediaQueryCSS variable were processed before with the regex /@media\s*\(.*\)\s*{\s*\.(.*)\s*{[\s\S]*}\s*}/gm – https://regex101.com/r/op3l1l/1

In this case, all styles are removed, which is an error, so such an innocent word "container" breaks the appearance.

The solution here is quite simple – correcting the regex to /@media\s*\(.*?\)\s*{[^{}]*({[^{}]*}[^{}a]*)*}/gm – https://regex101.com/r/i8FZZW/1

P.S. Sorry, I actually had the solution for a long time, I just didn't have time to publish it 🌚