Tailwind - 条件 class 渲染

Question

我正在尝试使用 Reactjs、storybook 和 tailwind 来创建自定义 UIUX 库，但我无法使 classes 的条件渲染工作，它在 storybook 中不起作用至少（对于任何 class、圆角、背景颜色、颜色等），我看不到任何变化并检查 CSS，没有应用 CSS。

编辑：

我要添加的 classes 没有串联，它们是完整的 class 名称，例如“bg-red-500”、“bg-green-600”等.

我有这个代码：

import React from 'react';
import cx from 'classnames';

interface ButtonProps {
   label: string;
   color: string;
   bgColor: string;
   size: 'sm' | 'md' | 'lg';
   rounded?: 'sm' | 'md' | 'lg' | 'full';
   disabled?: boolean;
   onClick?: (event: MouseEvent | any) => void;
}

const Button = ({ label, bgColor, color, size, rounded }: ButtonProps) => {
   const DEFAULT_BG_COLOR = color ? color : 'bg-green-500';
   const DEFAULT_ROUNDED = rounded ? 'rounded-' + rounded : 'rounded-full';

   const btnClass = cx(DEFAULT_BG_COLOR, DEFAULT_ROUNDED);

   console.log(btnClass);

   return (
      <button className={btnClass} onClick={() => console.log('Clicked')}>
         <div> {label} </div>
      </button>
   );
};

export default Button;

我做错了什么？

此致。

Answer 1

我怀疑您的代码有 2 个问题。

1st 我绝对确定你不应该连接 tailwind 类因为这些类不能被 tailwind 检测到因此不包含在编译文件中。您可以阅读更多 here.

也就是说，如果您坚持，您可以 safelist 您想要连接的类。

和第二个如果常规类不起作用，那么你应该确保所有带有 tailwind 类的文件都包含在 content 数组中 tailwind配置 文件

Tailwind - 条件 class 渲染

Tailwind - Conditional class rendering

reactjs

storybook

tailwind-css