vuejs2 - Tailwindcss @apply 指令在 vue 组件中不起作用

Question

我为我的新项目问题创建了一个带有 jetstream 和惯性 vue 堆栈的 Laravel 应用程序 Tailwindcs版本 2 使用 postCss并且它不支持 @apply vue 组件内的指令，但在 .css 内文件它工作正常我不想要那个，因为那个 css 文件会加载我的每个页面我只想要短的内联实用程序类 @apply指令，但我不能，我怎样才能做到这一点。？
在我的 vue 模板中

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

像这样在浏览器中输出

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

您必须设置 lang="postcss" <style> 上的属性标记为 Tailwind 是一个 PostCSS 插件。
所以改变这个

<style scoped>
    .input {
        @apply bg-gray-200 border h-10
    }
</style>

对此

<style lang="postcss" scoped>
    .input {
        @apply bg-gray-200 border h-10
    }
</style>