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

Question

我正在尝试运行 “npm 运行 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: [
  ],
}

ERROR in ./resources/css/app.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): TypeError: Cannot read property 'theme' of undefined at _default (/var/www/work/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5) at /var/www/work/node_modules/@tailwindcss/jit/src/index.js:50:11 at LazyResult.runOnRoot (/var/www/work/node_modules/postcss/lib/lazy-result.js:339:16) at LazyResult.runAsync (/var/www/work/node_modules/postcss/lib/lazy-result.js:391:26) at async Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:87:14) at processResult (/var/www/work/node_modules/webpack/lib/NormalModule.js:701:19) at /var/www/work/node_modules/webpack/lib/NormalModule.js:807:5 at /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:399:11 at /var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:251:18 at context.callback (/var/www/work/node_modules/loader-runner/lib/LoaderRunner.js:124:13) at Object.loader (/var/www/work/node_modules/postcss-loader/dist/index.js:96:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack compiled with 2 errors

Answer 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'),
    ])

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

Tailwind jit compiler error when running "npm run dev"

jit

laravel-mix

tailwind-css