been wrestling with the default container behavior all morning. it's so annoying when you want that standard gutter but tailwind just leaves the edges raw on mobile. i tried using the padding utility on every single page but then i realized i'm basically
duplicating rewriting the same classes everywhere. i ended up messing with the theme config to add some default horizontal padding directly into the container class. it's a bit of a hack because it makes the centering look weird if you aren't careful with the max-width.
theme: {container: {center: true,padding: '2rem',},}now my nested components are behaving much better though. i also stumbled onto this cool trick using CSS variables to sync the container padding with my main layout margin so everything stays perfectly aligned without extra math. it's a total lifesaver for keeping the rhythm consistent across different viewports. definitely worth a look if you're tired of adding px-4 or px-6 to every single div in your project.