相关疑难解决方法(0)

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

我传入一个类似于'primary'或 的道具'secondary'，它与我在中指定的颜色相匹配，tailwind.config.js然后我想使用Template literals如下方式将其分配给按钮组件：bg-${color}-500

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

类名在浏览器中显示得很好，它显示bg-primary-500在 DOM 中，但不显示在“应用的样式”选项卡中。

主题配置如下：

  theme: {
    extend: {
      colors: {
        primary: {
          500: '#B76B3F',
        },
        secondary: {
          500: '#344055',
        },
      },
    },
  },

但它不应用任何样式。如果我只是手动添加bg-primary-500它工作正常。

老实说，我只是想知道这是否是因为 JIT 编译器没有选择动态类名，或者我是否做错了什么（或者这不是使用 tailWind 的方式）。

欢迎任何帮助，提前致谢！

我刚刚学习 React 和 Tailwind CSS，并在使用 Tailwind 类的 CSS 网格方面有过奇怪的经历。我已经为计算器制作了按钮，最后一个按钮跨越两列：

应用程序.js：

export default function App() {\n  return (\n    <div className="flex min-h-screen items-center justify-center bg-blue-400">\n      <Calculator />\n    </div>\n  );\n}\n

计算器.js

import { IoBackspaceOutline } from "react-icons/io5";\n\nexport const Calculator = () => {\n  return (\n    <div className="grid grid-cols-4 grid-rows-5 gap-2">\n      <Button>AC</Button>\n      <Button>\n        <IoBackspaceOutline size={26} />\n      </Button>\n      <Button>%</Button>\n      <Button>\xc3\xb7</Button>\n      <Button>7</Button>\n      <Button>8</Button>\n      <Button>9</Button>\n      <Button>x</Button>\n      <Button>4</Button>\n      <Button>5</Button>\n      <Button>6</Button>\n      <Button>-</Button>\n      <Button>1</Button>\n      <Button>2</Button>\n      <Button>3</Button>\n      <Button>+</Button>\n      <Button>0</Button>\n      <Button>.</Button>\n      <Button colSpan={2}>=</Button>\n    </div>\n  );\n};\n\nconst Button = ({ …

我正在尝试使用通过 props 传递的十六进制颜色代码来设置 div 的背景颜色。这些是动态生成的一次性颜色，因此不能作为主题扩展添加到tailwind.config.

我认为模板文字是实现此目的的最佳方法，但无法使其与 Tailwind CSS 中的任意颜色值一起使用。

interface Props {
  color: string;
}

const ColorSwatch = ({ color }: Props) => {
  return (
    <div className="flex flex-col gap-1 p-2">
      <div
        className={`h-20 w-20 border border-gray-400 shadow-md bg-[${color}]`}
      ></div>
      <p className="text-center">{color}</p>
    </div>
  );
};

export default ColorSwatch;

将十六进制颜色代码直接粘贴到 className 列表中会产生预期结果，但尝试在模板文字中使用 prop 值会导致透明背景（未应用背景效果）。

寻求有关如何纠正此问题的建议或使用通过道具传递的十六进制代码动态设置背景颜色的不同方法。