Implémenter les paramètres de requête multimédia dynamique à l'aide de Tailwind CSS

Question

Dans mon application React JS, j'ai un composant et je souhaite définir un point d'arrêt mobile basé sur une variable :

const Composant = ({taille}) =>
 retour (
   
bonjour
)
}
Je souhaite ajouter quelque chose comme [size]:flex où md:flex définira un point d'arrêt basé sur cette propriété. (par exemple : si la taille est de 500 px, 100 px ou 900 px, définissez-la pour afficher flex) 
 Question : Est-il possible de définir des requêtes multimédias comme je l'ai décrit ci-dessus ? 
            

Answer 1

Vous pouvez utiliser le package classnames npm :

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