Dit artikel illustreert de methode voor het toepassen van breekpunten en mediaquery's op de 'overflow'-hulpprogramma's in Tailwind CSS.
Hoe gebruik je breekpunten en mediaquery's met 'overflow' in Tailwind?
Maak een HTML-structuur om bepaalde breekpunten en mediaquery's toe te passen op 'overflow'-hulpprogramma's in Tailwind. Gebruik dan de ' md ' of ' lg ”breekpunten met het gewenste “overloop-
Voorbeeld
In dit voorbeeld gebruiken we de 'md' breekpunt met de 'overloop-scroll' hulpprogramma in de
container om de schuifbalken eraan toe te voegen en toont ze altijd op middelgroot schermformaat: < lichaam >
< div klas = 'overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS biedt verschillende 'overflow'-hulpprogramma's, zoals
'overloop-auto', 'overloop-scroll', 'overloop-verborgen', 'overloop-zichtbaar'
enz. Deze hulpprogramma's bepalen hoe een specifiek element omgaat met de inhoud
die de containermaat overschrijdt. Elk hulpprogramma biedt unieke functionaliteit,
hun einddoel blijft echter hetzelfde, namelijk de overloop beheersen
gedrag van het geselecteerde element.
< / div >
< / lichaam >
Hier:
- De 'overloop-auto' class wordt gebruikt om de schuifbalken toe te voegen aan het container en laat ze alleen zien als scrollen nodig is.
- De 'md:overflow-scroll' class voegt de schuifbalken toe en toont ze altijd op de 'md' breekpunt (middelgrote schermgrootte).
Uitgang:
Volgens de bovenstaande uitvoer zijn breekpunten en mediaquery's met succes toegepast op de 'overflow' -hulpprogramma's.
Conclusie
Gebruik de ' sm ”, “ md ' of ' lg ” breekpunten met de gewenste “ overloop-