Cet article fournira un guide pour styliser le texte dans Tailwind en utilisant le schéma suivant :
- Utiliser la classe d'alignement du texte
- Fournir des couleurs au contenu du texte
- Utiliser différentes familles de polices
- Fournir des décorations de soulignement au texte
- Fournir des indentations au texte
Comment utiliser la classe Text Align dans Tailwind ?
Lors du style du contenu du texte, le positionnement du texte est aussi important que la décoration. Si le texte n’est pas correctement aligné, la conception entière de la page Web semblera étrange. Pour aligner le texte dans Tailwind, la classe suivante est utilisée :
texte- { alignement }
Les options d'alignement incluent ' centre ', ' gauche ', ' droite ', et ' justifier ». Comprenons chacun de ces alignements à l’aide de la démonstration ci-dessous :
< p classe = 'centre de texte bg-slate-200' > Il s'agit d'un exemple de texte fourni avec l'alignement TEXTE CENTRE. < / p >
< br >
< p classe = 'texte à droite bg-slate-200' > Ceci est un exemple de texte et il est fourni avec l'alignement TEXTE À DROITE. < / p >
< br >
< p classe = ' texte-gauche bg-slate-200' > Ceci est un exemple de texte et il est fourni avec l'alignement TEXTE GAUCHE. < / p >
< br >
< p classe = 'texte-justifie bg-slate-200' > Il s'agit d'un exemple de texte fourni avec l'alignement TEXT JUSTIFY. < / p >
L'explication du code ci-dessus est la suivante :
- Quatre ' p ' Les éléments sont créés et séparés par un saut de ligne.
- Le texte des quatre éléments p est aligné sur une position spécifique à l'aide du ' Alignement du texte} ' classe.
- Le ' bg-{couleur}-{numéro} ' La classe fournit la couleur d'arrière-plan pour chaque ' p ' élément.
Sortir
On peut voir dans le résultat ci-dessous comment chacune des classes d'alignement affecte la position du texte. Vous pouvez voir que le texte du premier élément est aligné au centre, le deuxième à droite, le troisième à gauche et le quatrième élément affiche un texte justifié :
Comment fournir de la couleur au contenu textuel dans Tailwind ?
La couleur joue un rôle important dans le style du contenu textuel d'un élément. Si une couleur appropriée n'est pas sélectionnée, le texte peut devenir difficile à lire. Cela affectera négativement la conception de la mise en page. Pour définir la couleur d'un texte dans Tailwind, utilisez la classe ci-dessous :
texte- { couleur } - { nombre }Dans la syntaxe définie ci-dessus, l'utilisateur doit fournir le nom de la couleur suivi d'un numéro qui sera responsable de la nuance de la couleur spécifiée.
La démonstration ci-dessous comporte trois ' p ' éléments stylisés à l'aide de différentes classes de couleurs de texte :
< p classe = 'text-violet-500 centre de texte' > Ceci est un texte de couleur violette < / p >< p classe = 'text-red-500 centre de texte' > Ceci est un texte de couleur rouge < / p >
< p classe = 'texte-vert-500 centre de texte' > Ceci est un texte de couleur verte < / p >
Les classes utilisées dans le code ci-dessus sont les suivantes :
- La première ' p L'élément ' est doté d'une couleur violette en utilisant le ' texte-{couleur}-{numéro} ' classe.
- Le deuxième et le troisième » p ' Les éléments sont dotés des couleurs rouge et verte en utilisant la même méthode.
- Le ' centre de texte ' La classe positionne le contenu du texte au centre de l'élément.
Sortir
D'après le résultat ci-dessous, il est clair que la couleur noire par défaut du texte est remplacée par les couleurs spécifiées à l'aide de la classe text-{color}-{number} :
Comment utiliser différentes familles de polices dans Tailwind ?
La police d'un élément de texte peut être utilisée pour mettre en valeur un texte spécifique. Chaque police a ses propres caractéristiques. Pour changer la police d'un élément dans Tailwind, utilisez la classe suivante :
Police de caractère- { famille }Tailwind propose trois familles de polices par défaut, à savoir ' sans ', ' empattement ', et ' mono ». Chacune de ces familles de polices possède un style de police différent.
De même, le « police-{poids} ' La classe peut être utilisée pour rendre le texte en gras, clair ou normal. Utilisons une démonstration pour fournir une pondération de police à différentes familles de polices dans Tailwind :
< p classe = 'font-mono font-extrabold centre de texte' > Il s'agit d'un texte extra gras en police MONO < / p >< p classe = ' font-serif font-semibold centre de texte' > Il s'agit d'un texte semi-gras en police SERIF < / p >
< p classe = ' font-sans font-extralight text-center' > Il s'agit d'un texte extra clair en police SANS < / p >
Explication du code :
- Les trois ' p Les éléments ' sont fournis par les familles de polices ' mono ', ' serf ' et ' sans ' en utilisant le ' famille de polices} ' classe.
- De même, les trois « p ' Les éléments sont fournis sous la forme ' extra-audacieux ', ' semi-gras ', et le ' lumière supplémentaire ' épaisseurs de police en utilisant le ' police-{poids} ' classe.
- Tous ces éléments utilisent le « centre de texte ' classe qui place le texte au centre de l'élément.
Sortir
Le résultat donné montre que chaque « p L'élément ' a une famille de polices et des épaisseurs de police différentes :
Comment fournir des décorations de soulignement au texte dans Tailwind ?
Les éléments de texte peuvent également être stylisés en ajoutant différents types de soulignements. Cela peut être utilisé pour mettre en valeur une partie d’un texte. Pour souligner un élément de texte, la classe suivante est utilisée :
souligner décoration- { style }Le mot ' souligner ' fournit un soulignement de base à l'élément et le ' décoration-{style} ' La classe est utilisée pour fournir différents styles au soulignement. Comprenons cela en utilisant la démonstration fournie ci-dessous :
< p classe = ' souligner la décoration-le centre du texte solide' > Ce texte est souligné < / p >< p classe = ' souligner la décoration-double centre-texte' > Ce texte a un double soulignement < / p >
< p classe = ' souligner le centre du texte avec décoration ondulée ' > Ce texte a un soulignement ondulé < / p >
< p classe = ' souligner le centre du texte en pointillés décoratifs ' > Ce texte est souligné en pointillés < / p >
Dans le code ci-dessus, il y en a quatre ' p » éléments fournis par le « solide ', ' double ', ' ondulé ', et ' pointé » souligne le style.
Sortir:
Il ressort clairement du résultat suivant que les éléments ont été stylisés en utilisant les différentes classes de décoration soulignées :
Comment fournir des indentations au texte dans Tailwind ?
Dans tout document texte, les indentations sont utilisées pour formater le contenu du texte. Tailwind fournit également une classe par défaut pour fournir une indentation au contenu du texte à l'aide de la classe suivante :
retrait- { largeur }La largeur dans la syntaxe définie ci-dessus est responsable de la taille de la marge d'indentation fournie au contenu du texte.
Stylisons deux éléments de texte en leur attribuant des valeurs d'indentation différentes et voyons le résultat :
< p classe = ' tiret-4 py-12' > Ceci est un exemple de texte et il est fourni avec l'indentation en utilisant la classe 'indent-4'. < / p >< p classe = ' retrait-28 ' > Ceci est un exemple de texte et il est fourni avec l'indentation en utilisant la classe 'indent-28'. < / p >
Dans le code ci-dessus, deux ' p ' sont fournis avec l'indentation de la largeur ' 4 ' & ' 28 ' respectivement. Le premier élément est également pourvu du rembourrage haut-bas en utilisant le « p-12 ' classe.
Sortir:
On peut voir dans le résultat ci-dessous que le deuxième élément de texte a une plus grande marge au début du texte en raison de la plus grande largeur d'indentation :
Il s’agit avant tout de styliser le texte à l’aide de Tailwind.
Conclusion
Tailwind propose diverses classes pour styliser les éléments de texte. Pour styliser le texte dans Tailwind, l'utilisateur peut utiliser « texte-{couleur}-{numéro} ', ' Alignement du texte} ', ' souligner la décoration-{style} ', et ' retrait-{largeur} ' classe. Cet article a fourni un guide pour styliser le texte à l'aide de différentes classes dans Tailwind.