Possible duplicate CSS generation?

[thevipinmishra]

Hi there, a very strange thing I came across while checking the generated CSS on the Tailwind play website.

Consider the following HTML.

<p class="lg:text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>

and Tailwind generates the following CSS. (excludingPreflight CSS)

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
@media (min-width: 1024px) {
  .lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

This got me thinking, why is it like this?

only 1 class was supposed to be generate right? only inside media query, not the vanilla version.

Just to confirm this, I ran it without it and it just worked fine.

Am I missing something?

[wongjn]

Seems to be an idiosyncrasy within Tailwind play. I do not observe the same behavior when running Tailwind locally.

[thevipinmishra]

I was recording a YouTube tutorial when I noticed it, and questioned myself - Do I know tailwind to record a tutorial? 🥲

[adamwathan]

Yeah noticed this the other day as a bug in Play, will see about fixing it this week!