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

Posted 2023-03-06

【中文标题】如何在 tailwindcss 中使用模板文字动态更改类？

【英文标题】：How to use template literals in tailwindcss to change classes dynamically?

【发布时间】：2022-01-20 05:06:12

【问题描述】：

我试图用这行代码来改变它，但它不起作用

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

【参考方案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 就不会将其从生产构建中移除。

---

还有更多选项可供您使用，例如使用 classnames 或 clsx 之类的库，或者可能是特定于 Tailwind 的解决方案，例如 twin.macro、twind、xwind。

进一步阅读：

React.js conditionally applying class names How to dynamically add a class to manual class names? Correct way to handle conditional styling in React Embedding Expressions in JSX Template literals - MDN Optimizing for Production - Writing purgeable html - Tailwind CSS

【讨论】：

我对模板文字连接引起的错误感到困惑，谢谢！不知道它也在文档中被警告：tailwindcss.com/docs/…

如果您需要插入/连接模板文字，您可以将类列入安全列表。 tailwindcss.com/docs/…