not work with scss in Vue <style>

[tiktwink]

Please help me 😭

[wongjn]

As per the documentation:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Instead, consider using Tailwind class names directly in the template code:

-<div class="AppRside">
+<div class="border">
   …
 </div>

-<style scoped>
-.AppRside {
-  @apply border;
-}
-</style>

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