@apply Is it abandoned in v4

[muchenkezhan]

<template>
  <div class="f-header">

  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.f-header {
  @apply flex shadow-sm items-center bg-white pl-3 pr-3;
  height: 60px;
}
</style>

Error message：

19:34:07 [vite] hmr update /src/views/markdown/components/header.vue?vue&type=style&index=0&scoped=23126ab5&lang.scss
19:34:07 [vite] Internal server error: [postcss] [postcss] Cannot apply unknown utility class: shadow-sm
  Plugin: vite:css
  File: F:/my-vue/bird_markdown_vue/bird_mardown/src/views/markdown/components/header.vue?vue&type=style&index=0&scoped=23126ab5&lang.scss:undefined:NaN
      at onInvalidCandidate (F:\my-vue\bird_markdown_vue\bird_mardown\node_modules\tailwindcss\dist\lib.js:20:348)
      at me (F:\my-vue\bird_markdown_vue\bird_mardown\node_modules\tailwindcss\dist\lib.js:15:29596)
      at De (F:\my-vue\bird_markdown_vue\bird_mardown\node_modules\tailwindcss\dist\lib.js:20:311)
      at si (F:\my-vue\bird_markdown_vue\bird_mardown\node_modules\tailwindcss\dist\lib.js:36:784)
      at async ui (F:\my-vue\bird_markdown_vue\bird_mardown\node_modules\tailwindcss\dist\lib.js:36:1079)
      at async Cr (F:\my-vue\bird_markdown_vue\bird_mardown\node_modules\@tailwindcss\node\dist\index.js:12:3305)
      at async $ (F:\my-vue\bird_markdown_vue\bird_mardown\node_modules\@tailwindcss\postcss\dist\index.js:10:3320)
      at async Object.Once (F:\my-vue\bird_markdown_vue\bird_mardown\node_modules\@tailwindcss\postcss\dist\index.js:10:3596)
      at async LazyResult.runAsync (F:\my-vue\bird_markdown_vue\bird_mardown\node_modules\postcss\lib\lazy-result.js:293:11)
      at async compileCSS (file:///F:/my-vue/bird_markdown_vue/bird_mardown/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:32271:25)

vite +vue3

[wongjn]

You probably need to use the @reference directive.

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890404835888910467

[adamwathan]

Here's the relevant docs:

https://tailwindcss.com/docs/compatibility#vue-svelte-and-astro