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

score 6 · Accepted Answer · 2021-06-18 13:36:51Z

6

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

edited Jun 18, 2021 at 13:36

answered Jun 18, 2021 at 13:22

user633440

Sign up to request clarification or add additional context in comments.

2 Comments

Rhys Over a year ago

Thanks a lot. Can I ask if tailwind css 2.0.4 versions doesn't support @tailwindcss/jit now? Because awhile ago, I didn't get such an error. I got this error after upgrading tailwindcss to 2.2 and although I tried to downgrade the tailwindcss to 2.0.4, I still got that error.

user633440 Over a year ago

@ZawLinTun I'm not sure, TBH. But without Tailwind 2.1+, you'd be missing out on a lot of new features anyway. I try and keep Tailwind updated to the latest to take advantage of them.

Collectives™ on Stack Overflow

Tailwind jit compiler error when running "npm run dev"

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related