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

Question

我为我的新项目问题创建了一个带有 jetstream 和惯性 vue 堆栈的 laravel 应用程序，它Tailwindcs使用的是版本 2 postCss，它不支持@applyvue 组件内部的指令，但在.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>

Answer 2

可以暂时解决此问题的解决方法：

.

在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'
        ]
      }
    ]
  }
}

.

在postcss.config.js（如果此文件不存在，只需创建它）

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer')
  ]
}

.

现在您可以通过添加在 Vue 文件中使用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>

.

这个答案基于这里的讨论：https ://github.com/laravel-mix/laravel-mix/issues/2778#issuecomment-826121931

Answer 3

创建 postcss.config.js 并添加以下代码片段对我有用：

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}