TailwindCSS styles get purged

[AlejandroAkbal]

As you can see, when deploying to production, the styles for the table get partly purged.

It might be a misconfiguration from my part, if so, please lend me a hand.

webpack.mix.js

const mix = require('laravel-mix')

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

mix
    //
    .js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss')
    ])
    .extract()

if (!mix.inProduction()) {
    mix.browserSync({ open: false })
}

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

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

const IS_LOCAL_ENV = process.env.APP_ENV === 'local'

module.exports = {
    mode: IS_LOCAL_ENV ? 'jit' : null,

    darkMode: false,

    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php'
    ],

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

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

[rappasoft]

I actually do get this sometimes and I've yet to figure it out, but mine isn't as severe as this, usually just a few styles around the search box go missing until I yarn run prod again.

I do want to understand why though because it's annoying.

webpack:

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

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

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

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

tailwind:

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

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            colors: {
                'primary': colors.indigo,
            },
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {},

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/line-clamp')
    ],
};

[rappasoft]

The only issue I see with that is you have to publish the vendor files for it to work. Which is annoying because those get updated a lot and people won't be seeing the new features, or will try to use them and get errors and I'll get more GitHub issues.

Edit: I also don't understand the second problem.

[AlejandroAkbal]

I have not published any vendor files at all.
I just added the route to your vendor (composer) files, but they are not published.
If they were published, the route would be ./resources/views/...

Look at my current tailwind config.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    mode: 'jit',

    darkMode: false,

    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './vendor/rappasoft/laravel-livewire-tables/resources/views/tailwind/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php'
    ],

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

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

And don't mind the second problem, I just added it for anyone who finds this discussion. It's not related to your project at all.

[rappasoft]

My brain somehow did not read it right when skimming. Thanks, I'm going to give it a try and add it to the wiki!

[rappasoft]

https://github.com/rappasoft/laravel-livewire-tables/wiki/Installation-&-Configuration#tailwind-purge

[AlejandroAkbal]

Awesome! I’m glad it worked for you too.

Great job Anthony.

[rappasoft]

Thanks for the help!