Breekpunten en mediaquery's gebruiken met achtergrondclip in Tailwind

Breekpunten En Mediaquery S Gebruiken Met Achtergrondclip In Tailwind



Bij het maken van verschillende secties op een webpagina kunnen er scenario's zijn waarin de programmeur de achtergrond moet knippen of aanpassen om de inhoud te verzamelen. Deze methodologie helpt bij het effectief beheren van de toegevoegde inhoud en bij het opmaken van verschillende paginasecties.

In deze blog worden de volgende kernconcepten uitgewerkt:

Hoe kan ik breekpunten en mediaquery's gebruiken/gebruiken met achtergrondclip in Tailwind?

De ' bg-clip-{trefwoord} Het hulpprogramma wordt gebruikt om het selectiekader van de achtergrond van het element in te stellen. Dit hulpprogramma kan worden gebruikt met meerdere eigenschappen, zoals “ opvuldoos ', ' grensvak ', ' inhoud-box ', En ' tekstvak ”.





Voorbeeld 1: Breekpunten toepassen met achtergrondclip in meewind

In dit voorbeeld worden de breekpunten met de achtergrondclip toegepast via de toegepaste “ bg-clip-{trefwoord} ” hulpprogramma met “ md ' Dat wil zeggen, middelgrote schermen en ' LG ” Dat wil zeggen, grote schermklassen:




< html >
< hoofd >
< meta tekenset = 'utf-8' >
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, initiële schaal=1' >
< script src = 'https://cdn.tailwindcss.com' >< / script >
< / hoofd >
< lichaam >
< tekstgebied klas = 'bg-clip-border p-6 bg-geel-500 rand-4 rand-rood-500 rand-onderbroken md:bg-clip-tekst lg:bg-clip-padding' > Dit is Tailwind-CSS < / tekstgebied >
< / lichaam >
< / html >

Volgens deze coderegels:



  • Geef eerst het CDN-pad op om gebruik te kunnen maken van de Tailwind-functionaliteiten.
  • Maak vervolgens een “