Tailwindcss: Changing config file is triggering Webpack, but not updating compiled CSS

[jameslkingsley]

When changing my tailwind.js file it triggers the Webpack build, however nothing is updated in the final app.css file. It used to work perfectly, not sure if this is a change in Tailwind or something else.

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "cross-env": "^5.2.0",
        "laravel-mix": "^2.0",
        "tailwindcss": "^0.6.3"
    }
}

webpack.mix.js:

let mix = require('laravel-mix')
let tailwindcss = require('tailwindcss')

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version()
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('tailwind.js')]
    })

[adamwathan]

Lame — confirmed, will fix.

[adamwathan]

Fixed in 0.6.4 which is now available 🤙

[jameslkingsley]

Can confirm it works now on 0.6.4!

[davidwebca]

Was there a regression on this? Somehow this doesn't work anymore and I swear I had it working before. 🤔

[adamwathan]

Can you create a project that reproduces the issue?

[davidwebca]

I've been working with Bedrock's WordPress starter theme, Sage that comes with Laravel Mix, but I'm currently failing at isolating the problem. When I start a blank project and add the same dependencies with the same versions, it works. I made sure it's not a caching issue by looking at the built css to make sure the values aren't reflected in the file itself 🤔 . I'll try to isolate it and I'll update here... might just be a random dependency conflicting. If you see something that I don't see just by looking at their package.json, let me know 👀.

[davidwebca]

Ugh, found it, a change I made myself and had completely forgot and overlooked. I was loading my config with const tailwindconfig = require('./tailwind.config.js'); to edit it some values inside my webpack.mix.js file because I wanted to change some values according to another package and passing it as an object to the plugin...

mix.options({
    processCssUrls: false,
    postCss: [
        tailwindcss(tailwindconfig),
        postcssCustomProperties()
    ],
});

...instead of passing a string path directly 🤦 . I totally get why it wasn't working! I apologize for the random pings, but if someone gets the same problem, at least it will be documented here I guess!