Using the @apply directive inside Vue3 scoped style block

[rogadev]

It would seem that I'm unable to use the @apply directive inside my scoped styles within components. Is this something I'm perhaps doing wrong or have not fully set up? I can't seem to find anything in the docs that suggests that I can/can't do what I intend within Vue 3 components.

<template>
  <div class="my-style">
    <p>Hello World</p>
  </div>
</template>

<style scoped>
.my-style {
  @apply mx-auto mb-4
}
</style>

[paprika135]

Same problem as me,but I find @apply just can use in index.scss.

[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.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.