我试图用这行代码来更改它，但它不起作用
const [click, setClick] = useState(false);
const closeNav = () => {
setClick(!click);
};
const openNav = () => {
setClick(!click);
};
<div
className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full }
transform z-400 h-screen w-1/4 bg-blue-300 "
>
<XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</div>;
这样做：
<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}></div>
// Alternatively (without template literals):
<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}></div>
请记住不要使用字符串串联来创建类名，如下所示：
<div className={`text-${error ? 'red' : 'green'}-600`}></div>
相反，您可以选择完成类名：
<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>
// following is also valid if you don't need to concat the classnames
<div className={error ? 'text-red-600' : 'text-green-600'}></div>
只要类名完整地出现在模板中，Tailwind就不会将其从生产构建中删除。
还有更多选项可供您选择，比如使用classnames或clsx等库，或者可能使用Tailwind特定的解决方案，比如twin.macro、twind、xwind。
进一步阅读：
- React.js有条件地应用类名
- 如何将类动态添加到手动类名中
- React中处理条件样式的正确方法
- 在JSX中嵌入表达式
- 模板文字-MDN
- 优化生产-编写可清除的HTML-Tailwind CSS
const bgClass: any = {
gray: " bg-gray-300",
red: " bg-red-300",
orange: " bg-orange-300",
yellow: " bg-yellow-300",
green: " bg-green-300",
teal: " bg-teal-300",
blue: " bg-blue-300",
indigo: " bg-indigo-300",
purple: " bg-purple-300",
pink: " bg-pink-300 ",
}
const convertLabelToBg = (label: string, baseClass: string): string => {
let className: string = baseClass;
if (label) {
className += bgClass[label];
}
return className;
}
它对我有效。我已经遵循了文档。
https://tailwindcss.com/docs/content-configuration#dynamic-类名