Точки остановки хвостового ветра (например, MD: Grid-Cols-2) не применяются правильно при начальном монтировании в микро ⇐ CSS

[Anonymous]

Я работаю над архитектурой микроформления, используя SPA и TailWindcss. В одном из MicroFrontendends используется адаптивная компоновка с классами сетки с ветром, такими как MD: Grid-Cols-2, XL: Grid-Cols-3 и т. Д. < /p>

Код: Выделить всё

                          className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5 auto-rows-fr pb-8"
ref={containerRef}
>
{evaluations.length > 0 ? (
evaluations.map((evaluation) => (



))
) : (



)}

< /code>
Тем не менее, при начальной нагрузке макет не уважает ожидаемые точки останова - он рендеры с использованием наименьшего макета, как будто ширина просмотра очень мала (мобильная). Это приводит к тому, что пользовательский интерфейс выглядит сломанным или чрезмерно сжатым. Точки останова были заблокированы на основе начальной ширины контейнера. 


Изображения ниже показывают, что класс Tailwind правильно применяется, но в «Computed» стилях сетка не является неправильным. />  Я попробовал несколько подходов: < /p>

[*]  Использование [b] resizeobserver < /strong>, чтобы подождать, пока контейнер (например,, .App) имел правильную ширину (≥768px), прежде чем рендеринг.  window.dispatchevent (новое событие ('resize')) [/b] после загрузки приложения. 

  Повторное ввождение в стиле стилей. />   регистрировать ширину контейнера  (document.queryselector ('. App'). OffsetWidth) < /strong> и проверка его правильной после загрузки приложения. < /p>
export const App = () => {
const isAppLoaded = useIsAppLoaded();
const [canRender, setCanRender] = useState(false);
const tried = useRef(false);

// 1.
useEffect(() => {
window.dispatchEvent(new Event('resize'));
setTimeout(() => {
window.dispatchEvent(new Event('resize'));
}, 50);
}, []);

// 2.
useEffect(() => {
if (!isAppLoaded || tried.current) return;

const el = document.querySelector('.app') || document.body;

const observer = new ResizeObserver(([entry]) => {
const width = entry.contentRect.width;
console.log('[Tailwind Fix] Observed width:', width);

if (width >= 768) {
console.log('[Tailwind Fix] reflow');
setCanRender(true);
tried.current = true;
observer.disconnect();
}
});

observer.observe(el);
return () => observer.disconnect();
}, [isAppLoaded]);

// 3.
if (!isAppLoaded || !canRender) {
return ;
}

return ;
};

Эта проблема возникает последовательно по всему проекту, где бы ни использовались адаптивные классы схемы, такие как LG: , md: или sm: . Несмотря на то, что классы присутствуют в DOM, ожидаемое отзывное поведение, основанное на точках останова>

Подробнее здесь: https://stackoverflow.com/questions/796 ... nitial-mou