Tailwindcss @apply directive doesn't work inside vue component

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>

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