Alpine.js class conditional not working with blade

Hi. I'm using Alpine.js with blade to add CSS to a given element once open is true. Everything seems to be working fine, except that ::class="{ 'text-red-200': open }" in the description div, it doesn't do anything.

I know open is set to true since clicking the button, the x-show attribute div does show my content dynamically.

Am I doing something wrong here with the class attribute from Alpine? Everything else seems to work fine.

{{-- Body --}}
<div class="bg-custom-secondary p-4" x-data="{ open: false }">
    <div class="" x-show="open">
        This works
    </div>
    {{-- Categories --}}
    <div class="">
        <span class="bg-custom-4th rounded text-xs font-bold py-1 px-2 text-white">
            Minecraft
        </span>
    </div>


    {{-- Description --}}
    <div ::class="{ 'text-red-200':  open }" class="text-sm mt-4 h-56 overflow-hidden">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, cum soluta praesentium, beatae
        nobis iste, fugit laboriosam accusamus veritatis ratione distinctio odio libero maxime ut ea! Minus
        ducimus assumenda incidunt!

    </div>

    {{-- Arrow down container --}}
    <div class="flex justify-center mt-4 cursor-pointer" @click="open = ! open">
        {{-- Arrow down --}}
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none"
            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
    </div>
</div>