How to properly set up inline purgecss in tailwindscc in laravel mix?

Question

Laravel

In a fresh project, laravel installed tailwindcss in accordance with points 1, 2, 3 https://tailwindcss.com/docs/installation/
(@tailwind inserted into app.scss)
Changed webpack.mix.js in accordance with what is described below , it turned out like this:

webpack.mix.js

const mix = require("laravel-mix");
require("laravel-mix-postcss-config");

const tailwindcss = require('tailwindcss');

mix.setResourceRoot(process.env.APP_URL)
    .js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .options({
         processCssUrls: false,
         postCss: [tailwindcss("./tailwind.config.js")],
    })

If you specify tailwind styles in app.scss

body {
    @apply bg-gray-400
}

then it works and the background color changes There

are two problems:
despite the fact that NODE_ENV = development, the built-in purgecss still works, and this is wildly inconvenient (although the manuals say that it should not work during development), you cannot specify arbitrary styles in templates

and also despite the fact that I gave him the path in the config to search for styles:

tailwind.config.js

module.exports = {
    purge: {
        content: [
            "./resources/views/**/*.php",
            "./resources/js/**/*.vue"
        ],
        options: {
            whitelist: ['bg-red-500', 'px-4'], // тест whitelist
        }
    },
    theme: {
        extend: {}
    },
    variants: {},
    plugins: []
};

after running npm run dev, neither the styles from templates and components, nor those specified in the whitelist appear in the styles.

Tried to generate full config ( npx tailwindcss init --full), but it doesn't change anything.

Answer 1

After updating to 1.6.1 and changing the app.scss piece to

...
/* purgecss start ignore */
@tailwind  base;
@tailwind  components;
@tailwind  utilities;
/* purgecss end ignore */
...

everything worked as expected, including templates. In development we get all the styles in production - only those used, incl. in blade templates and in vue components.