Tailwind’s responsive lessons (sm:, lg: and so forth.) are based totally on viewport width, not the width of a figure field. So even in case u set w-[370px] on a div the browser viewport is still huge, which means that sm:grid-cols-2 and lg:grid-cols-three hold to apply. That’s why u see grid-cols-3 on computing device-Tailwind is asking on the browser length, not ur simulated container length. If u want to truly simulate devices inside a element, u’ll need to either: Use browser DevTools responsive mode (max straightforward), Wrap the preview in an <iframe> and manipulate its width, or Enable Tailwind field queries (v3.2 ) so patterns respond to the field size rather than the viewport.