Tailwind classes not loading from variable in blade

I have a simple blade component. It is only responsible for showing a span. The view looks like this:

<span class="inline-flex items-center rounded-md {{ $bgClass }} px-2 py-1 text-xs font-medium {{$textClass}} ring-1 ring-inset {{$ringClass}}">
    {{$project->showAvailableSpots()}} spots open
</span>

The class looks like this:

<?php

namespace App\View\Components\elements;

use App\Models\Project;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class ShowAvailableSpots extends Component {

	public Project $project;
	public $bgClass;
	public $textClass;
	public $ringClass;

    /**
     * Create a new component instance.
     */
    public function __construct($project) {
        $this->project = $project;
		if($project->max_participants - count($project->attendees) < 6) :
			$this->bgClass   = 'bg-warning-50';
			$this->textClass = 'text-warning-700';
			$this->ringClass = 'ring-warning-600/20';
		else :
			$this->bgClass   = 'bg-success-50';
			$this->textClass = 'text-success-700';
			$this->ringClass = 'ring-success-600/20';
		endif;
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string {
        return view('components.elements.show-available-spots');
    }
}

I made sure to include the whole tailwind class name in the component, since injecting a part of a tailwind class is not allowed. When I inspect the element with devtools, the classnames on the span are there but the colors are not loading. When i hardcode the colors on the component, they do show.

Here's the code from devtools that gets rendered:

<span class="inline-flex items-center rounded-md bg-success-50 px-2 py-1 text-xs font-medium text-success-700 ring-1 ring-inset ring-success-600/20">
    16 spots open
</span>