Estoy creando un sitio web que usa Tailwind (3.0.2) y ReactJs (17.0.2).
Tengo un div que envuelve una barra de navegación que me gustaría representar condicionalmente según el tamaño de la pantalla. Este código funciona como el caso base:
<div className= { (showIcon ? "left-0" : `-left-full`) + " fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 w-10/12 text-white p-2 flex flex-col"} >Para pantallas medianas y más grandes (md: con viento de cola), he preparado este código que también funciona solo:
<div className= {nav ? 'nav active' : 'nav'} > // (Nav and nav active are states defined elsewhere)Quiero combinar ambos fragmentos, pero mi código genera errores de compilación. Por ejemplo:
<div className= { (showIcon ? "left-0" : `-left-full`) + " fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 w-10/12 text-white p-2 flex flex-col"} md:{nav ? 'nav active' : 'nav'} > Line 40:151: Parsing error: Unexpected token (40:151)Espero que esto sea lo que necesitas:
<div className={` fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 w-10/12 text-white p-2 flex flex-col ${showIcon?"left-0":"-left-full"} md:${nav ? 'nav active' : 'nav'} `}> </div>Usando tailwind de cola, a menudo escribo la función de nombres de clase de classnames para dividir la clase en grupos según su tipo para que sea más legible.
const classnames = (...classes: string[]) => classes.join(` `); <div className={classnames( `${showIcon ? "left-0" : "-left-full"}`, "fixed bottom-0 top-12", "bg-gray-500 bg-opacity-60", "w-10/12", "text-white", "p-2", "flex flex-col", "nav", )} > Si desea usar una directive con una clase personalizada, es posible que deba usar screen()
@media screen(sm) { .your-class { @apply ...your-tailwind-classess } } @media screen(md) { /* ... */ }