Erstellen Sie dynamisch Klassennamen in TailwindCss

Question

Ich erstelle gerade eine Komponentenbibliothek mit TailwindCss für mein nächstes Projekt und bin gerade auf ein kleines Problem mit der Button-Komponente gestoßen.

Ich habe Requisiten wie 'primary' oder 'secondary' übergeben, was genauso funktioniert wie das, was ich in tailwind.config getan habe. js und dann möchte ich es der Schaltflächenkomponente mit Template Lites zuweisen: bg-${color}-500

;

<button
    className={`
    w-40 abgerundet-lg p-3 m-2 Font-Bold Transition-All Dauer-100 Rand-2 aktiv: Maßstab-[0,98]
    bg-${color}-500 `}
    onClick={onClick}
    type="button"
    tabIndex={0}
  >
    {Kinder}
</button>

Der Klassenname wird im Browser gut angezeigt, er zeigt bg-primary-500 im DOM an, aber nicht auf der Registerkarte „Angewandte Stile“.

Theme-Konfiguration ist wie folgt:

theme: {
    verlängern: {
      Farben: {
        primär: {
          500: '#B76B3F',
        },
        sekundär: {
          500: '#344055',
        },
      },
    },
  },

Aber es werden keine Stile angewendet. Wenn ich bg-primary-500 einfach manuell hinzufüge, funktioniert es einwandfrei.

Ehrlich gesagt frage ich mich nur, ob das daran liegt, dass der JIT-Compiler keine dynamischen Klassennamen aufnimmt, oder ob ich etwas falsch mache (oder ob dies nicht die Art ist, tailWind zu verwenden).

Jede Hilfe ist willkommen, vielen Dank im Voraus!

Answer 1

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

Answer 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>