CODEWITHSUNDEEP
cssreactjstailwind-css
Asking
Asking

Reputation: 4192

Set media query dynamically in Tailwind css

In my react js application i have a component where i want to set the mobile break pint according to a variable:

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

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

I want to add instead of md:flex something like [size]:flex to be able to set break point according to that props.(ex: set display flex if the size is 500px or 100px or 900px)
Question: Is there possible to set the mediaquery according to the way that i described above?

Upvotes: 0

Views: 1328

Answers (1)

Yilmaz
Yilmaz

Reputation: 49265

You could use classnames npm package:

const rootClassName = cn(
     // you can add any tailwind classNames first
     "h-full flex flex-col",
     // this is conditional part. based on size prop, define className
    {
      [md:flex-1]: size === "A",
      [sm:flex-1]: size === "B",
    }
  )

Upvotes: 1

Related Questions