[Tailwind v3 classes not compiling in Sage 9 (Wordpress) after upgrading from Tailwind v2]

I have updated Tailwind V2 to Tailwind V3 in my Sage 9 project by following Tailwind's upgrade guide. When I add a class to my blade file, the new engine doesn't generate the required classes in the css. The only way I seem to get it to generate the classes is by updating (saving a change) my tailwind.config.js. This happens when I use either the yarn build or yarn start commands.

Using bg-blue text-primary as an example; the text colour works, but the background doesn't. Then if I add some slash comments to my tailwind.config.js file, save it and run yarn build then, behold a blue background with red text.

I had to downgrade autoprefixer to v 9.0.0 because of this error: Module build failed: Error: PostCSS plugin autoprefixer requires PostCSS 8. so I don't know whether or not this affects it's ability to generate the classes.

dependencies:

"autoprefixer": "^9.0.0",
"tailwindcss": "^3.0.23",
"postcss": "^8.4.7",

Tailwind.config.js:

module.exports = {

content: [
    './resources/views/**/*.blade.php'
],
theme: {
    colors: {
        primary: {
            DEFAULT: 'red',
        },
        secondary: {
            DEFAULT: '',
        },
        white: '#fff',
        black: '#000',
        blue: 'blue',
        gray: {
            DEFAULT: '',
        },
        transparent: 'transparent',
    },
    extend: {
        screens: {
            'sm' : '567px',
            'md' : '768px',
            'lg' : '1025px',
            'xl' : '1200px',
            '2xl' : '1366px',
            '3xl': '1660px',
            '4xl': '1920px'
        },
        zIndex: {
            '-10': '-10',
        }
    },
},
plugins: [
    globalStyles,
],
}

I also check this but can't find my answer: npx -https://stackoverflow.com/questions/71327552/tailwind-css-jit-or-v3-0-is-not-working-basic-installation-not-workingdeoland