如何使用模板文字动态管理 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 "></xicon>
</div>;

要解决此问题，请附上反引号 (`) 内的类名：

<div classname="{`absolute" inset-0 : transform z-400 h-screen w-1 bg-blue-300>
</div>

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

<div classname="{'absolute" inset-0 : transform z-400 h-screen w-1 bg-blue-300>
</div>

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

<div classname="{`text-${error" :>
</div>

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

<div classname="{`${error" :>
</div>

或：

<div classname="{error" :>
</div>

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

这里有一些有用的资源：

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

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