Contexto: Estou construindo algumas bibliotecas para me ajudar a construir um portal com microfrontends. Tenho uma biblioteca ui (com componentes ui), uma biblioteca commons (usa ui, tem componentes compartilhados para todos os microfrontends), uma biblioteca renderer (usa ui, é usada para renderizar dados strapi). Todas elas usam tailwind css.
Problema: Quando eu uso um componente da biblioteca commons que aceita filhos, os breakpoints do componente usado como filho não estão funcionando. Se eu usar o mesmo componente fora do componente commons, os breakpoints funcionam. Por exemplo:
<CommonsComponent>
<ComponentWithBreakpoint /> // breakpoints do not work
</CommonsComponent>
<ComponentWithBreakpoint /> // breakpoints work
Olhando as ferramentas de desenvolvimento, posso ver que a classe com o ponto de interrupção não está sendo aplicada (lg:flex-row de layout.css):
A classe flex-col também vem de um arquivo diferente (page.css)
Os componentes são:
const CommonsComponent = ({children}: {children: React.ReactNode}) => {
return (<div className="flex flex-col gap-4 w-full lg:w-[70%]">
{children}
</div>)
} //from the commons library
const ComponentWithBreakpoint = () => {
return (
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2 w-full">
//content
</div>
)} // from one of the microfrontends