Estoy construyendo un proyecto con reactJS para un proyecto escolar. En este proyecto se me permite usar frameworks css, y elegí tailwindcss porque ya lo había usado antes.

Pero ahora, recibo un error incómodo cuando intento concatenar clases con variables de reacción.

Ya cambié tailwind.config.js para extender los valores de ancho, como este fragmento de código a continuación:

 module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: { width : { '10r' : '25rem', '12r' : '30rem', '15r' : '37.5rem' } }, }, plugins: [], }

Y lo que estoy tratando de hacer en el archivo de reacción, es lo siguiente:

 const Body = () => { const [tamanhoTab, setTamanhoTab] = useState(15) return ( <div className="h-[60vh] w-4/5 bg-blue-100 m-auto mt-16"> <div className={`bg-black h-10 w-${tamanhoTab}r flex space-x-px flex-wrap`} id="tabuleiro"> </div> </div> ) } export default Body

El ancho del div simplemente no cambia, pero si escribo esto en su lugar:

 <div className={`bg-black h-10 w-15r flex space-x-px flex-wrap`} id="tabuleiro"> </div>

¡Funciona! Estoy frustrado porque ya investigué sobre esto y no encontré nada útil, ¡y estoy seguro de que este es un error estúpido que no puedo resolver!

Alguien tiene idea de que puede ser esto?

Espero que no sea confuso, gracias,