我试图通过在 tailwind.config.js
中编写一些主题来在我的项目中使用 Tailwind 自定义颜色。
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
theme: {
extend: {
colors: {
s2condPurple: '#a32eff', // works ⭕️
s2condPink: '#ff0099', // works ⭕️
s2condOrange: '#ff5f55', // works ⭕️
s2condYellow: '#ffe600', // doesn't work ❌
s2condLime: '#cdff64', // works ⭕️
s2condMint: '#2af1b5', // works at 'text-s2condMint' but not at 'border-s2condMint'
secondTest: '#ffe600', // works ⭕️ <-- I tested it for s2condYellow but it works perfectly!
s2condTest2: '#2af1b5', // doesn't work ❌
...
},
},
},
plugins: [],
}
我在我的代码中使用这些颜色,像这样:
const colorList: colorListType = {
life: 'white',
identity: 's2condPurple',
arts: 's2condPink',
industry: 's2condOrange',
knowledge: 'secondTest',
sports: 's2condLime',
languages: 'secondTest',
}
const { [data.name.en.toLowerCase()]: color } = colorList
...
<button
className={`border focus:outline-none hover:border-${color} active:border-${color} ${
clicked ? `border-${color}` : 'border-textBlack'
} `}
>
<p className="text-white">{value.kr}</p>
</button>
我能否得到关于这个问题的提示?
border-${color}
)将不起作用,除非在其他地方使用完整的实用类(例如border-s2condYellow
)。请参见 https://dev59.com/08Pra4cB1Zd3GeqPkaD3#71068925。 - Ed Lucas