Le ' écran h ' La classe dans Tailwind est utilisée pour attribuer la hauteur de la fenêtre à un élément HTML. Viewport n'est qu'un autre nom pour la taille de l'écran d'un client. Le développeur peut facilement sélectionner toute la fenêtre à l'aide de ceci ' écran h ', puis appliquez plusieurs classes Tailwind en conséquence.
Cet article fournira la procédure pour ajouter la hauteur de la fenêtre à un élément dans Tailwind à l'aide du ' écran h ' classe.
Comment définir la hauteur de la fenêtre d'affichage d'un élément à l'aide de la classe « h-screen » dans Tailwind ?
Si un élément se voit attribuer la hauteur de la fenêtre à l'aide de l'option ' écran h ', il ajustera automatiquement sa propriété de hauteur en fonction de l'écran du client. Afin d'utiliser la hauteur de la fenêtre dans Tailwind, suivez la convention ci-dessous :
< div classe = 'écran h' > Bonjour < / div >
De la démonstration ci-dessus, il est clair que le « écran h ' est utilisé dans l'attribut class de l'élément avec diverses autres classes Tailwind pour concevoir la mise en page.
Créons un tableau de bord factice et attribuons une hauteur de fenêtre à la barre latérale de l'écran du tableau de bord.
< div classe = 'fléchir' >
< div classe = 'w-56 h-screen arrondi-lg bg-blue-600 texte-centre texte-cyan-50 py-6 texte-2xl police-gras' >Tableau de bord
< ul classe = 'texte-lg py-8 espace-y-7' >
< que >Équipe< / que >
< que >Projets< / que >
< que >Rapports< / que >
< que >Documents< / que >
< / ul >
< / div >
< div classe = 'text-center text-3xl py-8 ps-5' >Bienvenue sur le tableau de bord !< / div >
< / div >
Explication du code :
- D’abord, un « div L'élément ' est créé avec la classe ' fléchir », cette classe aligne les éléments résidants sur une ligne horizontale.
- Ensuite, créez un autre ' div ' avec 8px de remplissage supérieur et inférieur en utilisant le ' py-2 ' et attribuez-lui une largeur fixe à l'aide de la commande ' w-56 ' classe. Ensuite, définissez la hauteur de l'élément sur la hauteur de la fenêtre d'affichage avec le ' écran h ' classe. Les coins du conteneur sont arrondis.
- Le ' bg-{couleur}-{numéro} ' La classe est utilisée pour fournir une couleur d'arrière-plan au conteneur. Le ' centre de texte ' La classe aligne le contenu du texte au centre. Le poids de la police du texte est défini sur « audacieux », et la taille de la police est « 2xl ».
- Ensuite, une liste non ordonnée « < ul >' est créé avec une grande taille de police et un ' 48px ' margin-top en utilisant la classe de vent arrière ' space-y '.
- Ensuite, quatre éléments de liste sont créés à l’aide du « < que > »balises.
- Un autre ' div L'élément ' est créé avec un remplissage haut-bas de 32 px et un remplissage de début en ligne de 20 px à l'aide de l'option ' py' et 'ps ' Des classes.
Le résultat du code expliqué ci-dessus est le suivant :
D'après le résultat ci-dessus, il est clair que la barre latérale du tableau de bord a la hauteur de la fenêtre d'affichage de l'écran. C’est tout à propos du but du « écran h 'cours dans Tailwind.
Conclusion
Le ' écran h ' La classe dans Tailwind est utilisée pour attribuer la hauteur de la fenêtre à un élément, c'est-à-dire la hauteur de l'écran du client. En utilisant le ' écran h ', l'élément héritera automatiquement de la hauteur de l'écran. Afin d'utiliser la hauteur de la fenêtre dans Tailwind, le ' écran h La propriété ' doit être transmise comme valeur pour le ' classe ' attribut comme '< classe div = « h-écran '>'. Cet article a fourni la procédure d'utilisation du ' écran h 'cours dans Tailwind.