在 TailwindCss 中动态构建类名答案

【问题标题】：Dynamically build classnames in TailwindCss在 TailwindCss 中动态构建类名
【发布时间】：2021-12-09 17:26:51
【问题描述】：

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

我正在传递一个类似于'primary' 或'secondary' 的道具，它与我在tailwind.config.js 中指定的颜色相匹配，然后我想使用Template literals 将其分配给按钮组件，如下所示：@987654327 @

<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 的方式）。

欢迎任何帮助，在此先感谢！

【问题讨论】：

您能否添加一个最小的可重现示例。我试图复制该错误，但对我来说它可以正常工作。
真的没有时间制作沙盒环境来重现它。但下面的 rokob 给出了我认为的答案。感谢您的宝贵时间！

标签： reactjs next.js tailwind-css

【解决方案1】：

这种编写 Tailwind CSS 类的方式is not recommended。甚至 JIT mode doesn't 也支持它，引用 Tailwind CSS 文档：“Tailwind 不包含任何类型的客户端运行时，因此类名需要在构建时静态提取，并且不能依赖于任何在客户端发生变化的任意动态值"

【讨论】：

Jup 是有道理的，可悲的是，但我想我将不得不采用另一种方法。感谢您的回答！

【解决方案2】：

所以在发现不推荐这种工作方式并且 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>

【讨论】：

甚至可以在代码中的某处将顺风类（您希望包含以供动态使用）作为 cmets 添加。允许使用bg-${color}-100 text-${color}-500，只要您在某处的评论中为您想要包含的每种颜色提及bg-accent-100 text-accent-500。
你还选择使用这项技术吗？为什么？

【解决方案3】：

对于使用JIT 的tailwind v3，您必须确保导出对象样式的文件包含在tailwind.config.js 的内容选项中，例如

 content: ["./src/styles/**/*.{html,js}"],

【讨论】：

我遇到了同样的问题，这实际上是我遗漏的：我的实用程序类是从存储在自定义文件夹中的本地数据对象导入的，因此 Tailwind 无法引用它们。我只需要用我的文件完成“内容”数组。
感谢您告诉我，尚未研究 Tailwind V3。所以我不知道现在有什么更好的方法
不仅仅是tailwind v3，它只是JIT模式。