multi-line CSS @apply not working in production with Nuxt 3, UnoCSS and SCSS

Question

My application is using UnoCSS, Nuxt 3 and my Style is using SCSS

One of my components has this style sheet

<style lang="scss">
.tag {
  @apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline
         capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block; //line is ignored
  @apply bg-brand-supporting hover:border-gray-400 text-white;
}
</style>

Which works perfectly when running "nuxt dev", however, as soon as I deploy it, the rounding as well as padding is noticeable missing, while the hover shadow is working.

What is responsible for the multi-line @apply to work / to not work and how do I make it working?

score 1 · Answer 1 · answered Jan 06 '23 at 18:11

After further tryouts it turns out only one @apply per CSS selector is allowed, but neither WebStorm complains, nor the build fails or anything.

As far as I remember, multiple @apply's worked with TailwindCSS and might be an issue with UnoCSS if I'm not mistaken.

Anyway, this works

.tag {
  @apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline
  capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block
  bg-brand-supporting hover:border-gray-400 text-white;
}

yes, multiline is not working. So any @apply or --uno or any other your custom command after first with not be applied. — Anton Karpenko, Aug 30 '23 at 19:34

multi-line CSS @apply not working in production with Nuxt 3, UnoCSS and SCSS

1 Answers1