I haven't spent as much time on Frontend Practice recently but picked up something new at work.

I realised I hadn't been cache-busting any of the CSS files in my Laravel projects. I'm surprised I've gone this long without it. To refresh it in my mind, there's two steps:

1. Add version to webpack.mix.js file

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

This creates a unique string for each asset in a mix-manifest.json file, which is then appended as a query string at the end of the file name when it's called.

1. Add the mix to the line where you link to the CSS file

<link rel="stylesheet" href="{ mix('/css/app.css') }}">

And that's it!