I have an alert component which gets the prop alert_type based on which it should change it's icon and colour. When I pass 'good' or 'warn' it works fine but if I pass 'bad' it does not accept the colour red. Further when I just edit the colour (both on 'good' and on 'bad') to be 'red' or any other color it does not work except 'yellow' and 'green' always work. How can this be?

/* 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>
  )
}

Edit: Without changing anything, green has now also stopped working.