mix fails

I am using tailwinds and have configured webpack to compile the CSS. It has suddenly stopped working. It says it was compiled, but if I look at the CSS file and search for a specific element it is not found. I am running windows 10, with npm installed on the windows machine. Using Homestead for the server.

My template

<div id="main" class="  2xl:bg-gray-50 xl:bg-yellow-100 lg:bg-purple-300 md:bg-green-300 sm:bg-red-300 " >
        <div class="py-12 mt-20">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
                    <div class="p-6 border-b border-gray-200 sm:bg-red-600 ">
                        You're logged in!
                    </div>
                </div>
            </div>
        </div>
    </div>

The first set of breakpoints works fine, the colors change as expected. The on in the middle with the text "Your Logged in" does not work. I tested the code at play.tailwinds.com and it works there.

I searched the CSS file for sm:bg-red-600 but it was not found, searching for just the bg-reg-600 was found.

Here are my configs. Tailwinds.config.js

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

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

    theme: {
        extend: {
            fontFamily: {
                sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                brown: {
                    50: '#fdf8f6',
                    100: '#f2e8e5',
                    200: '#eaddd7',
                    300: '#e0cec7',
                    400: '#d2bab0',
                    500: '#bfa094',
                    600: '#a18072',
                    700: '#977669',
                    800: '#846358',
                    900: '#43302b',
                },
            },
        },
    },

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

webpack.mix.js

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

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

Does anyone have any idea what the cause could be?