I’m encountering build errors when using TailwindCSS in my Laravel application. The errors occur when running npm run dev, and I haven’t been able to find a solution online. Here are the details:

Error Message

The errors are consistent across multiple files, including flatpickr.css, app.scss, home.scss, and coolecto-custom.scss. The key error is:

TypeError: Cannot read properties of undefined (reading 'blocklist')
    at createContext (D:\DECIZIF\CRI\cri-app-v3\node_modules\tailwindcss\lib\lib\setupContextUtils.js:1209:76)
    at getContext (D:\DECIZIF\CRI\cri-app-v3\node_modules\tailwindcss\lib\lib\setupContextUtils.js:1278:19)
    ...

Configuration Files

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/scss/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        legacyNodePolyfills: false,
        postCss: [ tailwindcss('./tailwind.config.json') ]
    });

mix.sass('resources/scss/home.scss', 'public/css');
mix.sass('resources/scss/coolecto-custom.scss', 'public/css');

module.exports = {
  output: {
    hashFunction: 'md5',
  },
};

tailwind.config.js

module.exports = {
    content: [
        './resources/js/app.js',
        './resources/**/*.vue',
        './resources/views/**/*.php',
        './app/**/*.php',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    blocklist: [],
    whitelist: [],
};

Context

• I’m using Laravel with Laravel Mix and TailwindCSS.
• I’ve used the Kompo framework (kompo.io) before without issues, but this project is causing problems.
• The errors started appearing after integrating TailwindCSS into this project.
• I’ve tried searching for similar issues but haven’t found anything matching this exact error.

What I’ve Tried Verified that TailwindCSS and PostCSS are correctly installed and configured.

Ensured that the tailwind.config.js file is correctly referenced in webpack.mix.js.

Checked for version mismatches between TailwindCSS, PostCSS, and Laravel Mix.

Questions

1. What could be causing the blocklist property to be undefined in TailwindCSS?
2. Are there any known compatibility issues between TailwindCSS, Laravel Mix, and PostCSS that could lead to this error?
3. Are there additional debugging steps I can take to diagnose the issue further?

Any pointers or resources to help resolve this issue would be greatly appreciated. Thank you!

I’m encountering build errors when using TailwindCSS in my Laravel application. The errors occur when running npm run dev, and I haven’t been able to find a solution online. Here are the details:

Error Message

The errors are consistent across multiple files, including flatpickr.css, app.scss, home.scss, and coolecto-custom.scss. The key error is:

TypeError: Cannot read properties of undefined (reading 'blocklist')
    at createContext (D:\DECIZIF\CRI\cri-app-v3\node_modules\tailwindcss\lib\lib\setupContextUtils.js:1209:76)
    at getContext (D:\DECIZIF\CRI\cri-app-v3\node_modules\tailwindcss\lib\lib\setupContextUtils.js:1278:19)
    ...

Configuration Files

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/scss/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        legacyNodePolyfills: false,
        postCss: [ tailwindcss('./tailwind.config.json') ]
    });

mix.sass('resources/scss/home.scss', 'public/css');
mix.sass('resources/scss/coolecto-custom.scss', 'public/css');

module.exports = {
  output: {
    hashFunction: 'md5',
  },
};

tailwind.config.js

module.exports = {
    content: [
        './resources/js/app.js',
        './resources/**/*.vue',
        './resources/views/**/*.php',
        './app/**/*.php',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    blocklist: [],
    whitelist: [],
};

Context

• I’m using Laravel with Laravel Mix and TailwindCSS.
• I’ve used the Kompo framework (kompo.io) before without issues, but this project is causing problems.
• The errors started appearing after integrating TailwindCSS into this project.
• I’ve tried searching for similar issues but haven’t found anything matching this exact error.

What I’ve Tried Verified that TailwindCSS and PostCSS are correctly installed and configured.

Ensured that the tailwind.config.js file is correctly referenced in webpack.mix.js.

Checked for version mismatches between TailwindCSS, PostCSS, and Laravel Mix.

Questions

1. What could be causing the blocklist property to be undefined in TailwindCSS?
2. Are there any known compatibility issues between TailwindCSS, Laravel Mix, and PostCSS that could lead to this error?
3. Are there additional debugging steps I can take to diagnose the issue further?

Any pointers or resources to help resolve this issue would be greatly appreciated. Thank you!

• php
• laravel
• tailwind-css

• What tailwind version you are using? – Tronic Commented Mar 19 at 17:31
• Tailwind is 4.0.14. – user25669822 Commented Mar 19 at 17:43
• @user25669822 It is impossible that you're using v4. It's clearly evident from your configuration file that you're using v3. See more here: stackoverflow/a/79520989/15167500 – rozsazoltan Commented Mar 19 at 18:01

1 Answer 1

TailwindCSS v4

blocklist avaliable from v4.0.0 or higher.

The blocklist setting added to the legacy JavaScript-based configuration in PR #14556, but it did not receive retroactive support in v3.

• Changelog: What's change in release v4.0.0-alpha.26
• tailwindlabs/tailwindcss PR #14556: Add blocklist support from v3 config files

TailwindCSS v3

blocklist avaliable from v3.2.4 or higher and fixed from v3.2.5 or higher.

The blocklist itself was introduced in v3 in PR #9812. It was released in v3.2.4 on November 11, 2022. So you need at least version v3.2.4.

• Changelog: What's change in release v3.2.4
• tailwindlabs/tailwindcss PR #9812: Allow users to block generation of certain utilities

However, its type was omitted from the TypeScript Config type, which was later added in PR #10239 in the v3.2.5 release.

• Changelog: What's change in release v3.2.5
• tailwindlabs/tailwindcss PR #10239: Fix missing blocklist type

Conclusion

I believe your installed Tailwind CSS version might be 3.2.4 (or lower), where the blocklist type was still incorrect.

Although you mentioned in a comment that you think you're using v4.0.14, that's impossible. From your configuration file, it's clear that the installed version is v3.

const tailwindcss = require('tailwindcss');

The quoted code snippet is a typical v3 installation. Starting from v4, a separate PostCSS package was released under the name @tailwindcss/postcss. From v4 onwards, you should install Tailwind CSS into the mix using this package, so it's likely that you're mistaken in thinking you're using v4.

To install the latest v3 version of Tailwind CSS, but at least v3.2.5, use the following command:

npm install tailwindcss@^3.2.5

If the command fails, npm will likely provide information about which dependency is preventing the installation of this version of TailwindCSS. It's likely that some dependency is restricting you to a lower version instead of the latest v3.

Installing the stable v4 would require a full migration, for which you can follow the migration guide. But again, that solving the problem does not require a v4 migration, as installing v3.2.5 is sufficient to resolve the issue.

• Upgrade guide - TailwindCSS v3 to v4 Docs
• What changed from v4 onwards? - StackOverflow