动态类名和 Tailwind CSS
在 JavaScript 中动态构造类名是一种常见的做法，但是当涉及到 Tailwind CSS 时，它提出了挑战。 Tailwind CSS 依赖于从源文件中提取完整完整的类名。
根据 Tailwind 的文档，使用字符串插值或串联动态构造类名将导致 Tailwind 找不到类，因此无法生成相应的 CSS。例如：
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>在此示例中，text-red-600 和 text-green-600 字符串不作为完整的类名存在，因此 Tailwind 会忽略它们。
解决方案：
要解决这个问题，有几种解决方案：
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>const colors = {
// ...
secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
// ...
};<p className={`${colors.secondary} text-text-white`}></p><p className="text-text-white">
以上是如何在 Tailwind CSS 中使用动态类名？的详细内容。更多信息请关注PHP中文网其他相关文章！
