Full bleed layout på mobil

På sider med innhold hender at man ønsker at deler strekker seg ut og bruker hele bredden til skjermen, som f.eks bilder. Spesielt nyttig på mobil visning der du gjerne ønsker å utnytte den lille bredden man har tilgjengelig.

TL;DR Kopier denne tailwind regla på det elementet du ønsker skal ha full bleed

relative left-[50%] mx-[-50vw] right-[50%] w-screen max-w-fit sm:left-0 sm:mx-0 sm:right-0 sm:w-full

Du ønsker gjerne at innholdet fortsatt er på lik linje med resten av innholdet på siden, det gjør du ved å sette left og right padding til å matche den totale paddingen til layouten din.

px-[7.5vw] sm:px-0

Hvis du alltid ønsker full bleed fjerner du bare de responsive breakpointene

relative left-[50%] mx-[-50vw] right-[50%] w-screen max-w-fit