Comment utiliser les points d'arrêt et les requêtes multimédias avec un clip d'arrière-plan dans Tailwind

Comment Utiliser Les Points D Arret Et Les Requetes Multimedias Avec Un Clip D Arriere Plan Dans Tailwind



Lors de la création de différentes sections dans une page Web, il peut y avoir des scénarios dans lesquels le programmeur doit découper l'arrière-plan ou le modifier afin d'accumuler le contenu. Cette méthodologie aide à gérer efficacement le contenu ajouté ainsi qu'à styliser les différentes sections de page.

Ce blog développe les concepts de base suivants :

Comment utiliser/utiliser les points d'arrêt et les requêtes multimédias avec un clip d'arrière-plan dans Tailwind ?

Le ' bg-clip-{mot clé} ' L'utilitaire est utilisé pour définir le cadre de délimitation de l'arrière-plan de l'élément. Cet utilitaire peut être utilisé avec plusieurs propriétés, telles que « boîte de rembourrage ', ' bordure-boîte ', ' boîte de contenu ', et ' zone de texte ».





Exemple 1 : application de points d'arrêt avec un clip d'arrière-plan dans Tailwind

Cet exemple applique les points d'arrêt avec le clip d'arrière-plan via le ' bg-clip-{mot clé} ' utilitaire avec ' Maryland 'c'est-à-dire des écrans de taille moyenne et' LG ' C'est-à-dire des classes sur écran de grande taille :




< HTML >
< tête >
< méta jeu de caractères = 'utf-8' >
< méta nom = 'portée d'affichage' contenu = 'largeur=largeur de l'appareil, échelle initiale=1' >
< scénario src = 'https://cdn.tailwindcss.com' >< / scénario >
< / tête >
< corps >
< zone de texte classe = 'bg-clip-border p-6 bg-jaune-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding' > Ceci est Tailwind CSS < / zone de texte >
< / corps >
< / HTML >

D'après ces lignes de code :



  • Tout d’abord, spécifiez le chemin CDN pour utiliser les fonctionnalités de Tailwind.
  • Ensuite, créez un élément «