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

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>

相反，您可以选择完整的类名称：

<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、twind、xwind。

进一步阅读：

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