将动态 tailwind class 添加到反应组件（Next.JS + Tailwind + TS）

Question

我在尝试动态分配 tailwind 类给反应组件时遇到以下菜鸟问题。

我在 tailwind.config.js 中扩展了我的主题颜色如下：

...
theme: {
    extend: {
      colors: {
        blueGray: {
           50: '#f6f9f9',
          100: '#e4f1f8',
          200: '#c2e0f0',
          300: '#91c0db',
          400: '#5b9bbf',
          500: '#4479a3',
          600: '#385f87',
          700: '#2d4768',
          800: '#203049',
          900: '#131d2f',
       },
       // OTHER COLORS
    },
  },
},
...

我的 React 组件如下所示：

import Draggable from 'react-draggable';

type SensorProps = {
    name: string
    color: string
}

export default function Sensor(props : SensorProps): JSX.Element {
    return (
        <Draggable
            axis="both"
            bounds="flow-canvas">
             <div className={`border-${props.color}-400  bg-${props.color}-50 text-${props.color}-700`}>
              <p> {props.name} </p>
            </div>
        </Draggable>
    )
}

这是我如何实例化传感器组件的一些示例

<Sensor name={"Water Level"} color={"blueGray"} />
<Sensor name={"Flow"} color={"mGreen"} />

问题是类没有应用，但是当我检查我的页面时 div 有正确的类.

如果切换自：

<div className={`border-${props.color}-400  bg-${props.color}-50 text-${props.color}-700`}>

至：

<div className={`border-blueGray-400  bg-blueGray-50 text-blueGray-700`}>

有效:(

我已经在使用顺风 JIT 编译器

...
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
...

有什么建议吗？

Answer 1

tailwind 编译器会在编译时解析您的代码，purges class它认为它没有在任何地方使用过。您没有直接使用 border-blueGray-400，因此它会将其视为未使用的 class 并将其从捆绑包中删除以提高性能。

我认为最好的解决方案是不要传递任意属性，如 color、size 等，而是传递 className 属性。

因此，您将像这样渲染您的组件：

<Sensor className="border-blueGray-400 bg-blueGray-50 text-blueGray-700" />

在子组件中：

<div className={props.className} />

Answer 2

您可以使用 clsx 这样的库有条件地渲染 classes。然后您的子组件将呈现：

<div className={clsx(
  "border-blueGray-400 bg-blueGray-50 text-blueGray-700": props.color === "blueGray",
  "border-mGray-400 bg-mGray-50 text-mGray-700": props.color === "mGray",
)} />

如果您只想修改一个或两个属性，这不是一个好的解决方案。然后我会建议直接将 tailwind classes 作为道具传递，就像其他答案中提到的那样。

但是如果你有一些更复杂的逻辑，比如依赖于 class 的多个 css 属性，这个解决方案可能会很好。

将动态 tailwind class 添加到反应组件（Next.JS + Tailwind + TS）

Add dynamic tailwind class to a react component (Next.JS + Tailwind + TS)

reactjs

next.js

tailwind-css