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

[Anonymous]

Я пытаюсь создать компонент React, который имитирует режим адаптивного дизайна Chrome DevTools для тестирования точек останова Tailwind. Я хочу, чтобы пользователи переключались между размерами устройств (мобильные, планшетные, настольные) и чтобы макет реагировал соответствующим образом.
Вид на рабочем столе


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