Tailwind media queries no longer working on create-nuxt-app v3.7.1

[tbredin]

trafficstars

The issue is that Tailwind media queries used in PostCSS blocks in components are not compiling correctly.

To replicate, I have generated a new nuxt app with the following settings:

To test a Tailwind media query, I have added one to the NuxtLogo component like so:

<style lang="postcss">
.nuxt-logo {
  height: 180px;

  @screen md {
    height: 280px;
  }
}
</style>

Expected CSS generated:

.nuxt-logo {
  height: 180px;
}
@media (min-width: 768px)
  .nuxt-logo {
    height: 280px;
  }
}

Resulting CSS generated:

.nuxt-logo {
    height: 180px;
    @media (min-width: 768px) {;
    height: 280px;
    }: ;
}

Chrome dev tools screenshot:

If anyone has a quick fix or workaround for me while a fix is rolled out in create-nuxt-app I would be eternally grateful too...

[mctweb]

Have you tried using this format instead? @media screen(md) { .nuxt-logo { height: 280px; } }

[tbredin]

I can confirm that the above format still works, yes. Thanks