phplaraveltailwind-css

TailwindCSS PostCSS Build Error: Cannot read properties of undefined (reading 'blocklist')

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

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!

Solution

  • 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.

    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.

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

    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.