postcss does not work with tailwindcss

• Laravel Mix Version: 6.0.6
• Node Version (node -v): v12.19.0
• NPM Version (npm -v): 6.14.8
• OS: macOS 11.1 (intel)

Description:

When I run a build, I have the impression that nothing is happening on the postCss compilation? My output app.css is the same as input. Any idea ?

@tailwind base;

@tailwind components;

@tailwind utilities;

Steps To Reproduce:

// webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix
    .postCss('resources/css/app.css', 'public/assets/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .webpackConfig(require('./webpack.config'))
;

// app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    purge: {
        content: [
            './vendor/laravel/jetstream/**/*.blade.php',
            './storage/framework/views/*.php',
            './resources/views/**/*.blade.php',
            './resources/js/**/*.vue',
            './node_modules/vue-tailwind/**'
        ],
    },
    theme: {
        extend: {
            colors: {
                blue: {
                    600: '#26A9E4'
                },
            },
            minHeight: {
                "screen-75": "75vh",
            },
            fontSize: {
                "55": "55rem",
            },
            opacity: {
                "80": ".8",
            },
            zIndex: {
                "2": 2,
                "3": 3,
            },
            inset: {
                "-100": "-100%",
                "-225-px": "-225px",
                "-160-px": "-160px",
                "-150-px": "-150px",
                "-94-px": "-94px",
                "-50-px": "-50px",
                "-29-px": "-29px",
                "-20-px": "-20px",
                "25-px": "25px",
                "40-px": "40px",
                "95-px": "95px",
                "145-px": "145px",
                "195-px": "195px",
                "210-px": "210px",
                "260-px": "260px",
            },
            height: {
                "95-px": "95px",
                "70-px": "70px",
                "350-px": "350px",
                "500-px": "500px",
                "600-px": "600px",
            },
            maxHeight: {
                "860-px": "860px",
            },
            maxWidth: {
                "100-px": "100px",
                "120-px": "120px",
                "150-px": "150px",
                "180-px": "180px",
                "200-px": "200px",
                "210-px": "210px",
                "580-px": "580px",
            },
            minWidth: {
                "140-px": "140px",
                "48": "12rem",
            },
            backgroundSize: {
                full: "100$",
            },
        },
    },
    variants: [
        "responsive",
        "group-hover",
        "focus-within",
        "first",
        "last",
        "odd",
        "even",
        "hover",
        "focus",
        "active",
        "visited",
        "disabled",
    ],
    plugins: [require("@tailwindcss/custom-forms")],
};

// webpack.config.js
const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

[colourgarden]

had to force the version of postcss-loader to something >= 4.1.0

This worked for me. Look like there may be an outdated dependency in Mix as v3 is installed by default.

Run:

npm install laravel-mix@latest postcss-loader@latest

[iWirk]

I don’t know if it will work for you but i had a similar issue caused by some conflicts in my peer deps so i had to force the version of postcss-loader to something >= 4.1.0