在 TailwindCss 中动态构建类名
P粉147747637
2023-08-24 10:11:17
<p>我目前正在使用 TailwindCss 为我的下一个项目构建一个组件库,我刚刚在处理 Button 组件时遇到了一个小问题。</p>
<p>我传递了像 <code>'primary'</code> 或 <code>'secondary'</code> 这样的道具,它与我在 <code>tailwind.config.js</code> 中指定的颜色相匹配,然后我想将其分配给按钮使用 <code>Template Lites</code> 的组件如下所示: <code>bg-${color}-500</code></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>类名在浏览器中显示得很好,它在 DOM 中显示 <code>bg-primary-500</code>,但不在“应用的样式”选项卡中显示。</p>
<p>主题配置如下:</p>
<pre class="brush:php;toolbar:false;">theme: {
extend: {
colors: {
primary: {
500: '#B76B3F',
},
secondary: {
500: '#344055',
},
},
},
},</pre>
<p>但它不应用任何样式。如果我只是手动添加 <code>bg-primary-500</code> ,它就可以正常工作。</p>
<p>老实说,我只是想知道这是否是因为 JIT 编译器没有选择动态类名,或者我做错了什么(或者这不是使用 tailWind 的方式)。</p>
<p>欢迎任何帮助,提前致谢!</p>
不建议使用这种方式编写 Tailwind CSS 类 。甚至 JIT 模式也不支持,引用一下Tailwind CSS 文档:“Tailwind 不包含任何类型的客户端运行时,因此类名需要在构建时静态提取,并且不能依赖于在客户”
所以在发现这种工作方式不被推荐并且JIT不支持它之后(感谢慷慨的评论者)。我已将方法更改为更加基于“配置”的方法。
基本上,我使用不同 props 的基本配置定义一个 const 并将它们应用于组件。这需要更多的维护工作,但它可以完成工作。
这是一个配置示例。 (目前无需打字)并进行一些更好的重构,但您会明白的。
然后我就这样应用样式: