Implement dynamic media query settings using Tailwind CSS-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Implement dynamic media query settings using Tailwind CSS

P粉141911244 2023-08-26 20:54:45

573

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

 const Component = ({size}) => { return ( hello
 ) }

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?

P粉141911244

reply all (1)

P粉7104789902023-08-27 10:09:52 1 floor

You can useclassnamesnpm package:

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