0

estoy intentando emplear un sistema de temas en mi proyecto. Sucede que quiero manejar un composable que me devuelva el tema y llamar a mi clase dinámica. Mi problema es que el elemento HTML recibe la etiqueta, pero Tailwind no reacciona.

<!-- temaActual recibo los valores 'Empresa1', 'Empresa2', 'Empresa3'  -->
<div :class="`bg-sidebar-${temaActual}`">
 <sidebar />
</div>

Pienso que es un problema con los ciclos de vida de Vue/Tailwind puesto a que si dejo en caché o llamo a la clase en otro componente, esta si carga correctamente.

<div class="bg-sidebar-Empresa1 bg-sidebar-Empresa2 bg-sidebar-Empresa3"></div>
<div :class="`bg-sidebar-${temaActual}`">
 <sidebar />
</div>
3
  • fijate si en el build chain hay un purgecss o similar, si es así vas a tener que pasarle mockups o un safelist ( el llamar la clase en un componente evita que se purge ) Commented el 4 jul. a las 16:38
  • Gracias, en efecto. Debía configurar Tailwind para que con la safelist dejara pasar mis clases. Aunque las tengo que agregar manualmente, supongo que ya es una gran solución. Gracias:) Commented el 4 jul. a las 17:11
  • si es compatible o usa purgecss, también podes usar un pattern purgecss.com/safelisting.html#patterns son regex así que algo tipo [/^bg-sidebar-/] -> matchea todo lo que empiece con "bg-sidebar-" o mas generico para tu ejemplo /-Empresa\d+$/ -> termina con -Empresa+un número Commented el 4 jul. a las 19:29

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.