Как моделировать хромированные Devtools Режим адаптивного проектирования в реагировании с точками перерывов завора? ⇐ CSS

[Anonymous]

Я пытаюсь создать компонент React, который имитирует режим адаптивного проектирования Chrome Devtools для тестирования точек останова. Я хочу, чтобы пользователи переключались между размерами устройства (мобильный, планшет, настольный компьютер) и имел соответствующий ответ макет. См. Я вижу Grid-Cols-3.

const ResponsiveGrid = () => {
const [device, setDevice] = useState('desktop');

const deviceWidths = {
mobile: 'w-[370px]',
tablet: 'w-[768px]',
desktop: 'w-full'
};

return (


{/* Grid items */}


);
};


Подробнее здесь: https://stackoverflow.com/questions/793 ... ailwind-br