How can I use @apply or @extend in <style> tags?

[sawanm9000]

Right now, I have to do this for it to work.

<style lang="scss" scoped>
@import "tailwindcss";

.myStyle {
  @extend .bg-gradient-to-r, .from-red-500;
}
</style>

I'm not sure if it's the right way of doing it or if it is getting treeshaked with PurgeCSS.

Here's how my config looks like:

// tailwind.config.js

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {}
    },
    
    prefix:  'tw-',
    
    variants: {},
    plugins: []
};

// quasar.extensions.json

{
  "tailwindcss": {
    "prefix": "tw-",
    "parts": [
      "components",
      "utilities"
    ]
  }
}

// .postcssrc.js

module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}