如上所述,Tailwind引擎可以动态呈现自定义类:
不喜欢的方式:
className={`bg-[${custom-color}]-100`}
它期望:
const customBgColorLight = 'bg-custom-color-100';
className={`${customBgColorLight} .....`}
为了使其正常工作,您必须在
tailwind.config.js
中的
safelist:[]
中包含类名。
对于 Tailwind v.3。
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
safelist: [
'bg-custom-color-500',
'text-custom-color-500',
'border-custom-color-500',
.....
'hover:bg-custom-color-500',
....
],
theme: {
extend: {
colors: {
'custom-color': {
100: '#d6d6d6',
500: '#5E8EA2',
.....
},
......
所以你可以使用它:
const yourClassObj = {
customBgColor: 'bg-custom-color-500',
customBrdColor: 'border-custom-color-500',
customTxtColor: 'text-custom-color-500',
};
const { customBgColor, customBrdColor, customTxtColor } = yourClassObj;
<YourComponent
className={`mb-2 font-semibold py-2 px-4 rounded-lg
${ conditionGoesHere ? `${customBgColor} text-white cursor-default`
: `${customTxtColor} border ${customBrdColor}
bg-transparent hover:border-transparent
hover:${customBgColor} hover:text-white`
}`}
/>