Implement dynamic media query settings using Tailwind CSS

Question

In my React JS application I have a component and I want to set a mobile breakpoint based on a variable:

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

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

I want to add something like [size]:flex where md:flex will set a breakpoint based on that property. (eg: if the size is 500px or 100px or 900px, set it to display flex)

Question: Is it possible to set media queries the way I described above?

Answer 1

You can use classnames npm package:

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