如何使用模板文字动态管理 Tailwind CSS 类？

TailwindCSS 中使用模板文字的动态类更改

在 TailwindCSS 中，模板文字提供了一种根据状态或 props 动态更改类的便捷方法。但是，如果使用不正确，可能会出现语法错误。

一个常见问题是尝试使用样式规则动态添加或删除类，例如：

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>

或者，您可以使用以下内容语法：

<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}>
</div>

避免使用字符串连接，因为 TailwindCSS 可能会删除生产版本中未使用的类：

<div className={`text-${error ? 'red' : 'green'}-600`}>
</div>

相反，请选择完整的类名称：

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}>
</div>

或：

<div className={error ? 'text-red-600' : 'text-green-600'}>
</div>

其他选项包括类名和twin.macro.

这里有一些有用的资源：

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

以上是如何使用模板文字动态管理 Tailwind CSS 类？的详细内容。更多信息请关注PHP中文网其他相关文章！