0
216
Viewscómo hacer que la clase de utilidad de viento de cola sea dinámica
Quiero crear un cuadrado simple usando viento de cola, pero quiero que la clase sea dinámica. 
const Design1 = () => { var h = 10; var w = 10; return ( <div className="bg-[#1a1b1a] h-[100vh] w-[100vw] relative "> <BackAndCodeButton /> <div className="flex h-[100vh] items-center justify-center "> <div className={` w-20 h-20 bg-white`}></div> //This one works <div className={` w-${w} h-${h} bg-white`}></div> //but I want it to work this way </div> </div> ); };
·
Juan Pablo Isaza
1 answers
Answer question0
TailwindCSS no le permite generar clases dinámicamente. Entonces, cuando usa lo siguiente para generar la clase ...
`w-${w}`…TailwindCSS no lo tomará como una clase TailwindCSS válida y, por lo tanto, no producirá el CSS necesario.
En su lugar, debe incluir el nombre completo de la clase en su código fuente. Puede devolver el valor total de esta manera
function myFunc(val) { return "w-"+val ; } donde val es el valor de su tamaño que está pasando como 10 aquí.
Al hacerlo de esta manera, la cadena completa para cada clase está en su código fuente, por lo que TailwindCSS sabrá generar el CSS aplicable.
Leer más: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
·
Juan Pablo Isaza
Report
Answer question