Support @apply within Vue components

[Destaq]

@apply directives inside Vue components' style, whether scoped or not scoped, do not work.

However, regular direct class styling in the template section styles the HTML successfully. Regular CSS styling in the style section also has an effect.

---

Import of main.js (imports dist.css which is the built @tailwind directives.
import "../public/dist.css";

Code excerpt

    <div class="pt-4"><p class="card">Test please...</p></div>
  </header>
</template>

<style>
p {
  @apply font-mono font-bold;
}

.card {
  @apply text-xs;
}
</style>

Contents of package.json dependencies:

  "dependencies": {
    "autoprefixer": "^10.0.2",
    "core-js": "^3.6.5",
    "tailwindcss": "^2.0.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-rc.5",
    "vuex": "^4.0.0-rc.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "stylelint": "^13.8.0",
    "stylelint-config-standard": "^20.0.0"
  },