使顺风/反应组件在支柱组件上改变颜色-仅对某些颜色有效

Question

我有一个警报组件，它得到的道具alert_type基于它应该改变它的图标和颜色。当我通过'good'或'warn'时，它可以正常工作，但如果我通过'bad'，它就不接受红色。此外，当我只是编辑颜色(无论是"好"还是"坏")为"红色"或任何其他颜色时，它都不起作用，除了"黄色"one_answers"绿色"总是起作用。这怎么可能呢?

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

---

编辑:在没有改变任何东西的情况下，green现在也停止了工作。

Answer 1

问题是我使用字符串连接来构建类。当Tailwind解析文件以检测要创建哪些css类时，它无法选择这些类。https://tailwindcss.com/docs/content-configuration class-detection-in-depth