I am currently working on iterating through a loop and adding a conditional class to each element above 4 items in order to implement some responsive styling with tailwindcss.
Initially, I had the loop adding another class, which was functioning properly:
<template x-for="(card, index ) in cards" :key="index">
<div class="w-40 h-64"
x-modal="card"
:class="card.someOtherClass"
>
<div class="card-content" :id="'card-' + card.id">
</div>
</div>
</template>
However, I realized the need to add a conditional statement to check if the number of items exceeded 4. In my research, I came across a relevant question that was previously asked:
AlpineJS: How can I add a class to an element conditionally?
This source recommended using { 'class-name': statement }, so I modified my code as follows:
<template x-for="(card, index ) in cards" :key="index">
<div class="w-40 h-64"
x-modal="card"
:class="[card.someOtherClass,
{'bg-green-500': index > 3 },
]"
>
<div class="card-content" :id="'card-' + card.id">
</div>
</div>
</template>
Unfortunately, when rendered, the browser displays
<div class="w-40 h-64 some-other-class [object Object]">