Optical way to give differents styles to a component with tailwind

[restive timber]

Hi, what would be the most optical way if i want to add 3,4,5 differents styles to this component ? because for now it's only depending on true or false so only 2 possibilities, by avoid typescript if possible

`---
const { style = true } = Astro.props;

{
style ? (
<a
href="/"
class="inline-flex h-10 items-center justify-center rounded-[5px] border-[1px] border-darkBlue bg-sweetPurle px-4 font-semibold text-white shadow-shade hover:bg-darkPurple hover:shadow-shade2"
>
<slot />
</a>
) : (
<a
href="/"
class="inline-flex h-10 items-center justify-center rounded-[5px] border-[1px] border-sweetPurle px-4 font-semibold text-sweetPurle shadow-shade hover:bg-greySoftWhite hover:shadow-shade2"
>
<slot />
</a>
)
}`

thanks

[tiny sail]

No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[bold grove]

I am not sure about astro
but try
switch-case ?

[graceful turret]

Tailwind suggests doing something like this: ```jsx

const colorVariants = {
blue: 'bg-blue-600 hover:bg-blue-500 text-white',
red: 'bg-red-500 hover:bg-red-400 text-white',
yellow: 'bg-yellow-300 hover:bg-yellow-400 text-black',
}

const { color } = Astro.props

<button class:list={[
"default classes",
colorVariants[color]
]}>
<slot />
</button>

You can also try using `tailwwind-merge`: https://github.com/dcastil/tailwind-merge/blob/v1.13.2/docs/what-is-it-for.md