运行“npm run dev”时出现 Tailwind jit 编译器错误

Question

我正在尝试运行“npm run dev”，但它最终给了我一个错误。我正在使用 Laravel Mix 和 Tailwind CSS。

版本

• laravel-mix：6.0.22
• tailwind-css: ^2.0.4
• @tailwindcss/jit：^0.1.18，

资源/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

webpack.mix.js

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss("resources/css/app.css", "public/css", [
        require('@tailwindcss/jit'),
    ])

./resources/css/app.css 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/ dist/cjs.js): TypeError: 无法在 /var/www/work 的 _default (/var/www/work/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5) 处读取未定义的属性“主题” /node_modules/@tailwindcss/jit/src/index.js:50:11 在 LazyResult.runOnRoot (/var/www/work/node_modules/postcss/lib/lazy-result.js:339:16) 在 LazyResult.runAsync ( /var/www/work/node_modules/postcss/lib/lazy-result.js:391:26) 在异步 Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:87: 14) 在 processResult (/var/www/work/node_modules/webpack/lib/NormalModule.js:701:19) 在 /var/www/work/node_modules/webpack/lib/NormalModule.js:807:5 在 /var /www/work/node_modules/loader-runner/lib/LoaderRunner.js:399:11 在 /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:251:18 在 context.callback （/var /www/work/node_modules/loader-runner/lib/LoaderRunner.js:124:13) 在 Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:96:7)

子编译中出现 1 个错误（使用“stats.children: true”和“--stats-children”了解更多详细信息）webpack 编译时出现 2 个错误

Answer 1

要启用即时模式，请在 tailwind.config.js 文件中将模式选项设置为“jit”。

tailwind.config.js

module.exports = {
    mode: 'jit',
    purge: ['./resources/**/*.{js,vue,blade.php,css}'],
    theme: {
        extend: {}
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

但首先，您需要升级 Tailwind 和相关软件包，因此请运行以下命令。

npm install -D laravel-mix@latest tailwindcss@latest postcss@latest autoprefixer@latest

此外，您还需要从 Webpack 配置中删除 JIT 包并需要 Tailwind。从 Tailwind CSS v2.1 开始，@tailwindcss/jit 已与核心 Tailwind CSS 存储库合并。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss("resources/css/app.css", "public/css", [
        require('tailwindcss'),
    ])