如何使顺风实用程序类动态化

【问题标题】：how to make tailwind utility class dynamic如何使顺风实用程序类动态化
【发布时间】：2022-06-30 00:44:06
【问题描述】：

我想使用顺风创建一个简单的正方形，但我想让班级动态

const Design1 = () => {
var h = 10;
var w = 10;
  return (
<div className="bg-[#1a1b1a] h-[100vh] w-[100vw] relative ">
  <BackAndCodeButton />
  <div className="flex h-[100vh] items-center justify-center ">
    <div className={` w-20 h-20 bg-white`}></div>  //This one works 
    <div className={` w-${w} h-${h} bg-white`}></div> //but I want it 
    to work this way
   
  </div>
</div>
 );
};

【问题讨论】：

标签： javascript reactjs tailwind-css next

【解决方案1】：

TailwindCSS 不允许您动态生成类。所以当你使用以下来生成类时……

`w-${w}`

…TailwindCSS 不会将其作为有效的 TailwindCSS 类，因此不会生成必要的 CSS。

相反，您必须在源代码中包含类的全名。你可以像这样返回完整的值

function  myFunc(val) {
return "w-"+val ;
}

val 是你传递的尺寸值，比如这里的 10。

通过这种方式，每个类的整个字符串都在您的源代码中，因此 TailwindCSS 将知道生成适用的 CSS。

【讨论】：