Tailwind jit compiler error when running “npm run dev”

Question

I'm trying to run "npm run dev," but it gives me an error in the end. I'm using Laravel Mix and Tailwind CSS.

Versions

laravel-mix: 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

Karl Hill Karl Hill · Accepted Answer · 2021-06-18T13:22:12

To enable just-in-time mode, set the mode option to 'jit' in your tailwind.config.js file.

tailwind.config.js

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

But first, you will need to upgrade your Tailwind and related packages, so run the following.

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

Also, you'll need to remove the JIT package from your Webpack config and require Tailwind. As of Tailwind CSS v2.1 @tailwindcss/jit has been merged with the core Tailwind CSS repository.

webpack.mix.js

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

Tailwind jit compiler error when running “npm run dev”

1 Answers