className="hidden lg:block" . To me, the idea that each page has all components for every size variation baked in seems like a nightmare to manage. It also seems like it will bloat my code significantly. For instance, I am using some MUI buttons that i want to be size=large on desktop and size="medium" on mobile. If I am going to do this in tailwind alone ill need to have multiple copies of the same button in the DOM each with different props.