使用Tailwind CSS实现动态媒体查询设置

Question

在我的React JS应用程序中，我有一个组件，我想根据一个变量设置移动断点：

<Component size={'500px'}/>

const Component = ({size}) => {
 return (
   <div md:flex>hello</div>
) 
}

我想要在md:flex的位置上添加类似[size]:flex的东西，以便根据该属性设置断点。（例如：如果大小为500px或100px或900px，则设置为display flex）

问题：是否可以根据我上面描述的方式设置媒体查询？

Answer 1

您可以使用classnames npm包：

const rootClassName = cn(
     // 首先添加任何tailwind classNames
     "h-full flex flex-col",
     // 这是条件部分。根据size属性，定义className
    {
      [md:flex-1]: size === "A",
      [sm:flex-1]: size === "B",
    }
  )