Tailwindcss #apply directive doesn't work inside vue component - vuejs2

Question

I create a laravel application with jetstream and inertia-vue stack for my new project problem is Tailwindcs version 2 using postCss and it doesn't support #apply directive inside vue components but inside .css file it works fine I don't want that because that css file will load my every page I just want short inline utility classes with #apply directive but I can't, How Can I achieve that.?
inside my vue template
<template>
<div class="mt-4">
<label for="hello">Hello</label>
<input id="hello" class="input"/>
</div>
</templete>
<style scoped>
.input {
#apply bg-gray-200 border h-10
}
</style>
output inside browser like this
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
webpack.config.js
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
tailwind version : "^2.0.1",
laravel version : 8.x,
jetstream version : 2.x,
inertiajs version: "^0.8.2"

Answer 1

You have to set the lang="postcss" attribute on the <style> tag as Tailwind is a PostCSS plugin.
So change this
<style scoped>
.input {
#apply bg-gray-200 border h-10
}
</style>
To this
<style lang="postcss" scoped>
.input {
#apply bg-gray-200 border h-10
}
</style>

Answer 2

A workaround that can temporarily solve this problem:
.
In webpack.config.js
const path = require('path')
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js')
}
},
module: {
rules: [
{
test: /\.(postcss)$/,
use: [
'vue-style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
}
}
.
In postcss.config.js (if this file not exist, just create it)
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss')('./tailwind.config.js'),
require('autoprefixer')
]
}
.
Now you can use in Vue file by adding lang="postcss
<style lang="postcss">
.input-form {
#apply block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}
</style>
.
This answer is based on the discussion here: https://github.com/laravel-mix/laravel-mix/issues/2778#issuecomment-826121931

Answer 3

Creating postcss.config.js & adding the below snippet worked for me:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}