Estoy tratando de hacer un componente de reacción que cambie el ancho de un parámetro, pero no funciona y no sé por qué.
function Bar() { const p =80 const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]` console.log(style) return ( <div className=' h-8 w-full'> <div className={`bg-slate-500 h-8 w-[${p}%]`}> </div> </div> ) } export default BarCon este código obtengo una barra de tamaño completo, pero si uso un String estricto con 80.0, funciona bien
Las otras respuestas son incorrectas. En Tailwind V3, JIT está incluido y ya no necesitará configurar el modo en jit. E incluso en Tailwind V2, el código publicado no funcionaría.
La solución real, como mencionó @Dennis Martinez en un comentario, es mover los estilos verdaderamente dinámicos fuera de las clases y colocarlos en inline styles .
Esto está mal :
const padding = 80; <div className=`p-[${padding}%]`> Some Content </div> En su lugar, use inline styling :
const padding = 80; <div style={{padding: `${padding}%`}}> Some Content </div>en el modo de adición tailwind.config.js: ' tailwind.config.js mode: 'jit' .
Sugeriría https://v2.tailwindcss.com/docs/just-in-time-mode para obtener más información.
p.ej:
module.exports = { //other options mode: 'jit', }Modo de inclusión: 'jit' en el archivo de configuración de viento de cola