Laravel Tailwind PostCSS issue

Question

I have an issue with my Laravel app, I'm building the app using TailWindCSS for styling.

However, whenever I try and run the npm run dev command it goes through the cycle of purging unused CSS to lower file size (I'm sure you all know what it does :P)

However, before it can finish it errors out with the following error message (above the '}' at the start are just css classes that I presume are being purged):

} is not a PostCSS plugin
    at Processor.normalize (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\processor.js:63:15)
    at new Processor (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\processor.js:10:25)
    at postcss (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\postcss.js:26:10)
    at LazyResult.runOnRoot (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\lazy-result.js:339:16)
    at LazyResult.runAsync (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss\lib\lazy-result.js:391:26)
    at async Object.loader (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss-loader\dist\index.js:97:14)
    at processResult (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\webpack\lib\NormalModule.js:721:19)
    at C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\webpack\lib\NormalModule.js:827:5
    at C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\postcss-loader\dist\index.js:142:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
(node:6980) UnhandledPromiseRejectionWarning: Error: spawn ENAMETOOLONG
    at ChildProcess.spawn (internal/child_process.js:403:11)
    at spawn (child_process.js:667:9)
    at Object.execFile (child_process.js:319:17)
    at Object.module.exports.fileCommand (C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\node-notifier\lib\utils.js:76:13)
    at C:\Users\Adzei\OneDrive\Website Projects\naso_webapp\node_modules\node-notifier\notifiers\toaster.js:145:11
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6980) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

Now, if I comment out the require('postcss') from my webpack.mix.js it builds with no errors. I also attempted to use the postcss-import, which builds fine as well but it doesn't actually remove any unused CSS.

This is the .postCss section of the webpack.mix.js:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
        require('postcss'),
        require('autoprefixer'),
    ]);

and finally here is my TailWindCSS config:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

fatm fatm · Accepted Answer · 2021-09-03T04:27:51

You shouldn't add tailwindcss as a plugin like that. Just put that code in your app.css. And delete requires from webpack.mix.js.

@tailwind base;
@tailwind components;
@tailwind utilities;

Laravel Tailwind PostCSS issue

1 Answers