使用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",
    }
  )