Blade component styling not being rendered through Vite with TailwindCSS

Hello guys,

Since I've been swapping my whole webapp over from a default Jetstream (VILT-stack) to a plain and clean Laravel application, I've been having issues with Vite not correctly rendering my Blade components.

To give you guys a little example, I'm using a button component, which retrieves TailwindCSS class names based on the values given through the component, see example below:

Components/button.blade.php

<a href="{{ $route }}" class="flex-none {{ getCorrectBackground() }} {{ getCorrectBackgroundHover() }} {{ getCorrectPadding() }} text-white text-sm md:text-base font-semibold rounded-md transition ease-in-out duration-300 inline-flex items-center">
    {{ $title }}
</a>

These values are then being handled by my component class, which returns the correct value by doing so:

App\View\Components\Button.php

// Returning correct class name based on the given button type
public function getCorrectBackgroundHover() {
        return [
            'blue' => 'hover:bg-blue-600',
            'red' => 'hover:bg-red-600'
        ][$this->color];
}

All of this worked perfectly and my CSS was being rendered correctly, until I stopped working on it and wanted to proceed with it the next day.

The issue at this point is that the class names being retrieved form the functions (getCorrectBackgroundHover() for example), aren't being rendered correctly thus not showing any styling on the website; https://i.imgur.com/zAAFYuK.png whilst it is showing the correct class names through inspect element, which proves the code does work as it should.

Same story for all other components using this way of retrieving class names, such as my notifications.

The only thing that has been changed in my Vite config file is the removal of the app.css file, code is shown below:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [,
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

TailwindCSS config file also hasn't really been changed;

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/views/Components/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    extend: {

    },
    plugins: [],
}

I already searched around through multiple Google pages and the Laracast forum, but didn't find any specific issues relating to this one.

Thanks in advance for those who help me out!