我目前正在使用 TailwindCss 为我的下一个项目构建一个组件库，我刚刚在处理 Button 组件时遇到了一个小问题。
我传递了像 'primary' 或 'secondary' 这样的道具，它与我在 tailwind.config.js 中指定的颜色相匹配，然后我想将其分配给按钮使用 Template Lites 的组件如下所示： bg-${color}-500
2
1039<button
className={`
w-40 rounded-lg p-3 m-2 font-bold transition-all duration-100 border-2 active:scale-[0.98]
bg-${color}-500 `}
onClick={onClick}
type="button"
tabIndex={0}
>
{children}
</button>
类名在浏览器中显示得很好，它在 DOM 中显示 bg-primary-500，但不在“应用的样式”选项卡中显示。
主题配置如下：
theme: {
extend: {
colors: {
primary: {
500: '#B76B3F',
},
secondary: {
500: '#344055',
},
},
},
},
但它不应用任何样式。如果我只是手动添加 bg-primary-500 ，它就可以正常工作。
老实说，我只是想知道这是否是因为 JIT 编译器没有选择动态类名，或者我做错了什么（或者这不是使用 tailWind 的方式）。
欢迎任何帮助，提前致谢！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
不建议使用这种方式编写 Tailwind CSS 类 。甚至 JIT 模式也不支持，引用一下Tailwind CSS 文档：“Tailwind 不包含任何类型的客户端运行时，因此类名需要在构建时静态提取，并且不能依赖于在客户”
所以在发现这种工作方式不被推荐并且JIT不支持它之后（感谢慷慨的评论者）。我已将方法更改为更加基于“配置”的方法。
基本上，我使用不同 props 的基本配置定义一个 const 并将它们应用于组件。这需要更多的维护工作，但它可以完成工作。
这是一个配置示例。 （目前无需打字）并进行一些更好的重构，但您会明白的。
const buttonConfig = { // Colors primary: { bgColor: 'bg-primary-500', color: 'text-white', outline: 'border-primary-500 text-primary-500 bg-opacity-0 hover:bg-opacity-10', }, secondary: { bgColor: 'bg-secondary-500', color: 'text-white', outline: 'border-secondary-500 text-secondary-500 bg-opacity-0 hover:bg-opacity-10', }, // Sizes small: 'px-3 py-2', medium: 'px-4 py-2', large: 'px-5 py-2', };然后我就这样应用样式：
<motion.button whileTap={{ scale: 0.98 }} className={` rounded-lg font-bold transition-all duration-100 border-2 focus:outline-none ${buttonConfig[size]} ${outlined && buttonConfig[color].outline} ${buttonConfig[color].bgColor} ${buttonConfig[color].color}`} onClick={onClick} type="button" tabIndex={0} > {children} </motion.button>