Context

I have a TALL app (Tailwind, Alpine.js, Laravel, Livewire). I am using the livewire-datatable package for displaying some datatables. When I run npm run dev (more correctly mix) it's nice and clean. When I run npm run prod (more correctly mix --production) some CSS in the package itself breaks.

My understanding

I have been looking around for a solution. From what I understood, the problem has nothing to do with the package itself. It's more a problem of the combination of Tailwind - Mix - PurgeCSS.

I understood that PurgeCSS purges the unused css in production builds. However when the used classes are dynamically generated, purgeCSS fails to detect them and therefore purges them making them inexistant in the prod css.

I found ways to add exceptions for specific classes that are dynamically generated in my own code but I don't know how can I add exception for the whole package.

My question

Is my understanding correct ? and how can I add just the right exceptions in order to get the benefits of a production build with PurgeCSS without losing necessary styles for my build ?

UPDATE

When I published the provided ressources, it works fine ... But it feels like a dirty solution, as now my repository is tracking code that is not mine and that I won't change ... Is there a better way ?

Some files

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2",
        "@tailwindcss/typography": "^0.3",
        "alpinejs": "^2.8",
        "laravel-mix": "^6.0.6",
        "laravel-mix-tailwind": "^0.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1",
        "sass": "^1.32",
        "sass-loader": "^8.0",
        "tailwindcss": "^2.0"
    }
}

webpack.mix.js

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

require("laravel-mix-tailwind");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js("resources/js/app.js", "public/js/app.js")
    .sass("resources/sass/app.scss", "public/css/app.css")
    .tailwind("./tailwind.config.js")
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
}

tailwind.config.js

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

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {
        extend: {
            backgroundColor: ['active', 'disabled'],
            textColor: ['disabled'],
            cursor: ['disabled'],
            borderColor: ['disabled'],
        }
    },
    purge: {
        content: [
            './app/**/*.php',
            './resources/**/*.html',
            './resources/**/*.js',
            './resources/**/*.jsx',
            './resources/**/*.ts',
            './resources/**/*.tsx',
            './resources/**/*.php',
            './resources/**/*.vue',
            './resources/**/*.twig',
        ],
        options: {
            defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
            whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
};