Vue 3 sass @reference

[wildwind123]

i want to this feature, but use with sass
https://tailwindcss.com/docs/functions-and-directives#reference-directive

this work

<template>
  <h1>Hello world!</h1>
</template>
<style>
  @reference "../../app.css";
  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>

i try use it for sass, but it does not work, how can solve it ?

<style lang="sass">
@reference "../../app.css"
h1
  @apply text-2xl font-bold text-red-500

</style>

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