在 TailwindCss 中动态构建类名
P粉147747637
P粉147747637 2023-08-24 10:11:17
0
2
553
<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>
P粉147747637
P粉147747637

全部回复(2)
P粉034571623

不建议使用这种方式编写 Tailwind CSS 类 。甚至 JIT 模式也不支持,引用一下Tailwind CSS 文档:“Tailwind 不包含任何类型的客户端运行时,因此类名需要在构建时静态提取,并且不能依赖于在客户”

P粉530519234

所以在发现这种工作方式不被推荐并且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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板