reactjs - 使用变量时 Tailwind 不工作(React.js)

Question

目前使用 tailwind 和制作可重用的 react 组件一直面临这个问题，您可以在其中将一些样式作为 Prop 作为 tailwind 类传递。实际问题出在“pb-{number}”属性上。我可以通过这种方式传递它并且可以正常工作。 “border-{number}”属性也会发生这种情况，但它以某种方式接受 border-2 和 border-4(仅这些)。

import './button.css'
    
    export default function Button({
        color = "orange",
        inset = "pb-3", <--- this will work
        border = "border-8",
        className, 
        onClick, 
        link
        , ...props}){
        
        return (
            <div onClick={onClick}
            className={`btn-${color} ${border} 
            ${className} ${inset}`}> <--- this will work
                
                <div>
                    {props.children}
                </div>
            </div>

但如果我试图让它更干净，那么不使用 tailwind 的人只需要传递一个值(如下例所示)它就不会工作。

import './button.css'

export default function Button({
    color = "orange",
    inset = "1", <--- this
    border = "4",
    className, 
    onClick, 
    link
    , ...props}){
    
    return (
        <div onClick={onClick}
        className={`btn-${color} border-${border} 
        ${className} pb-${inset}`}> <--- this wont work
            
            <div>
                {props.children}
            </div>                

        </div>
    )
}

我真的不知道为什么会这样。希望有更多经验的人可以澄清我的疑问。提前致谢。

Answer 1

在 tailwind 中你不能使用像 bg-${color} 这样的动态类命名，虽然我们可以模拟它是那样的，但它不是首选。因为 Tailwind 会编译其 CSS，所以它会查找您的所有代码并检查类名是否匹配。

对于您的方法，您可以试试这个。

const Button = () => {
  const color = "red-500";
  const inset = "3";
  const border = "border-8";
  return <div className={`bg-${color}  ${border} pb-${inset}`}>Hello</div>;
};

export default Button;

应用具有适当填充的输出

但请尽量避免这种解决方法，因为 Tailwind CSS 不推荐这种方法。