在TailwinCss中动态构建类名 [英] Dynamically build classnames in TailwindCss

问题描述

我当前正在使用TailwinCss为我的下一个项目构建组件库，我只是在处理Button组件时遇到了一个小问题。

我传入了一个与我在tailwind.config.js中指定的颜色匹配的道具，如'primary'或'secondary'，然后我想使用Template literals将其分配给按钮组件，如下所示：bg-${color}-500

<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编译器没有选择动态类名，还是我做错了什么(或者这不是顺风的工作方式)。

欢迎任何帮助，提前谢谢！

推荐答案

所以在发现这种工作方式不被推荐并且JIT不支持它之后(感谢那些慷慨的评论)。我已将方法更改为更基于"配置"的方法。

基本上，我使用不同道具的基本配置定义常量，并将这些配置应用于组件。它的维护工作稍多一点，但它可以完成工作。

以下是配置的示例。(目前没有打字)和一些更好的重构，但你会有想法的。

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>

这篇关于在TailwinCss中动态构建类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！