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

【问题标题】：Tailwind jit compiler error when running "npm run dev"运行“npm run dev”时出现 Tailwind jit 编译器错误
【发布时间】：2021-09-03 01:43:11
【问题描述】：

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

版本

laravel 混合：6.0.22
tailwind-css：^2.0.4
@tailwindcss/jit：^0.1.18，

resources/css/app.css

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

webpack.mix.js

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

tailwind.config.js

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

./resources/css/app.css 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）：类型错误：无法读取未定义的属性“主题” 在 _default (/var/www/work/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5) 在 /var/www/work/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' resp。 '--stats-children' 获取更多详细信息）webpack 编译时出现 2 个错误

【问题讨论】：

标签： jit tailwind-css laravel-mix

【解决方案1】：

要启用just-in-time 模式，请在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'),
    ])

【讨论】：

非常感谢。请问tailwind css 2.0.4 版本现在不支持@tailwindcss/jit 吗？因为前段时间，我没有收到这样的错误。将 tailwindcss 升级到 2.2 后出现此错误，虽然我尝试将 tailwindcss 降级到 2.0.4，但仍然出现此错误。
@ZawLinTun 我不确定，TBH。但如果没有 Tailwind 2.1+，无论如何您都会错过很多新功能。我尝试将 Tailwind 更新到最新版本以利用它们。
非常感谢。经过数小时的尝试解决此问题，您救了我。