It's resolved now

[eloraa]

What version of Tailwind CSS are you using?

V^4.1.5

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

Next.js 15.3.1, React ^19.1.0, @tailwindcss/postcss ^4.1.5

What version of Node.js are you using?

v20.11.1

What browser are you using?

Chrome, Firefox

What operating system are you using?

Windows, Linux

Reproduction URL
resolved

Describe your issue

For certain className, Tailwind is appending empty classes (you can see in the image, also from the reproduction link), especially those with breakpoints. I tried switching devices and reinstalling everything, but I still get the same output.

[wongjn]

This is a by-product of how Tailwind structures its class name rules in development. Tailwind uses CSS nesting in development. So when we have a class like lg:grid-cols-3, it generates:

.lg\:grid-cols-3 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
}

In the case when the media query does not match, the outer class name still matches, but the inner media query does not match, so it is removed from view in devtools:

.lg\:grid-cols-3 {
  /**
   * This is removed since it does not match.
   * @media (width >= 64rem) {
   *   grid-template-columns: repeat(3, minmax(0px, 1fr));
   * }
   */
}

Thus, it turns into this:

.lg\:grid-cols-3 {
}

The outer selector is still valid and matches, but is empty.