如何在尾风中使用模板文字来动态更改类？

Question

我试着用这行代码来修改它，但是它不起作用

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>;

Answer 1

这样做吧：

<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>

相反，您可以选择 complete类名：

<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就不会将其从生产构建中删除。

您还可以使用更多的选项，比如使用类名或clsx之类的库，或者使用特定于Tailwind的解决方案，比如twin.macro、孪生、X风。

二读：

• React.js有条件地应用类名
• 如何将类动态添加到手动类名中？
• 在React中处理条件样式的正确方法
• 在JSX中嵌入表达式
• 模板文字- MDN
• 生产优化-编写可净化的HTML -尾风CSS

Answer 2

 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-class-names