如何在 Tailwind 中将特定的 styles 添加到 className

Question

选中时我将样式传递给复选框，但我在 tailwind.css 文件中执行此操作。

我想知道是否有可能以某种方式在 className 内联中执行此操作，因为我真的不想将许多全局 styles 添加到 tailwind.css。

所以这是组件，所以每当我检查它时都会添加一个 SVG 而不是默认复选框：

            <input
                key={color}
                type="checkbox"
                className="peer hidden input:checked"
                name="checkbox-colors"
                checked={isChecked === color}
                value={color}
                onClick={(e) => {
                  handleColorChange(e.currentTarget.value);
                }}
                readOnly
              />
              <div className="h-full w-full flex justify-center items-center">
                <CheckIcon className="hidden" />
              </div>

和 styles 是这些：

input:checked + div svg {
  @apply block;
}

所以如果有可能以某种方式在输入className="peer hidden input:checked..."中使用它

Answer 1

实际上找到了一种使用cn of @classNames并像那样做的方法：

<div className="h-full w-full flex justify-center items-center">
                <CheckIcon
                  className={cn({
                    hidden: isChecked !== color,
                  })}
                />
              </div>

就像一个魅力！