Laravel-mix: postcss does not work with tailwindcss

[flemzord]

• 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'),
        },
    },
};

[thecrypticace]

Try this instead:

    .postCss('resources/css/app.css', 'public/assets/css', [tailwindcss('./tailwind.config.js')])

[flemzord]

Thanks @thecrypticace but I have the same behavior

[thecrypticace]

I've been using postcss + tailwind for a while with the Mix v6 betas and releases. Not sure what's happening here. 🤔

Are you using the PostCSS 7 compat build for Tailwind 2.0 by chance? If so you do not need to do that with Mix v6.

[flemzord]

I was using compatibility before the arrival of Mix v6
But no more

[florianbouvot]

I use tailwindcss with sass but I try with the following config and it's work well:

webpack.mix.js

...
mix.postCss('path/to/css/file.css', 'path/to/dist/')
...

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

I like to use a separate config for PostCSS 😉

[thecrypticace]

Yeah you can use a separate config but you don't have too. I'm certain I would've run into this already because almost everything I write nowadays uses postcss + tailwind.

@flemzord can you provide a reproduction repo by chance?

[flemzord]

I can't reproduce in a separate project :( I must have a conflict in one of my outbuildings.

[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

[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

[thecrypticace]

We require PostCSS ^4.0: https://github.com/JeffreyWay/laravel-mix/blob/ff32a823c6de20413c07858d3cb0546d0851094e/package.json#L87

If version 3 is being installed something is wrong at the npm / yarn level. My guess is it is related to npm v7 and peer dependencies.

[lk77]

Hello,

in my case i needed to install laravel-mix-postcss-config and add .postCssConfig();,
because i use an external postcss.config.js, now tailwind is working fine

[mariojgt]

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

This work for me.