使用变量时 Tailwind 不起作用（React.js）

Question

目前使用顺风并制作可重用的反应组件面临着这个问题，您可以将一些样式作为顺风类作为道具传递。实际的问题在于“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>

但是，如果我尝试使其更清晰，那么不使用顺风的人只需传递一个值（如下例所示），它将无法工作。

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

在顺风中，你不能使用像 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;

padding应用 适当的输出

但请尝试避免此解决方法，因为 Tailwind CSS 不推荐这样做。