Tengo un componente de alerta que obtiene el prop alert_type en función del cual debería cambiar su icono y color. Cuando paso 'bien' o 'avisar' funciona bien pero si paso 'mal' no acepta el color rojo. Además, cuando solo edito el color (tanto en 'bueno' como en 'malo') para que sea 'rojo' o cualquier otro color, no funciona, excepto que 'amarillo' y 'verde' siempre funcionan. ¿Cómo puede ser esto?

 /* This example requires Tailwind CSS v2.0+ */ import { CheckCircleIcon, ExclamationIcon, XCircleIcon, } from '@heroicons/react/solid' interface AlertProps { title: string alert_type?: string children?: React.ReactNode } export function Alert({ title, alert_type = 'good', children }: AlertProps) { const [colour, Icon] = (() => { switch (alert_type) { case 'good': return ['green', CheckCircleIcon] case 'warn': return ['yellow', ExclamationIcon] case 'bad': return ['red', XCircleIcon] default: return ['green', CheckCircleIcon] } })() const colours = { bg: 'bg-' + colour + '-50', icon: 'text-' + colour + '-400', title: 'text-' + colour + '-800', content: 'text-' + colour + '-700', } return ( <div className={'rounded-md p-4 ' + colours.bg}> <div className="flex"> <div className="flex-shrink-0"> <Icon className={'h-5 w-5 ' + colours.icon} aria-hidden="true" /> </div> <div className="ml-3"> <h3 className={'text-sm font-medium ' + colours.title}>{title}</h3> <div className={'mt-2 text-sm ' + colours.content}>{children}</div> </div> </div> </div> ) }

Editar: sin cambiar nada, el verde ahora también dejó de funcionar.