Ghid pentru stilarea textului folosind Tailwind CSS

Acest articol va oferi un ghid pentru stilarea textului în Tailwind folosind următorul schiță:

• Utilizați clasa de aliniere text
• Furnizați culori conținutului textului
• Utilizați diferite familii de fonturi
• Furnizați decorațiuni de subliniere textului
• Furnizați indentări textului

Cum se utilizează clasa de aliniere a textului în Tailwind?

În timp ce stilați conținutul textului, poziționarea textului este la fel de importantă ca și decorul. Dacă textul nu este aliniat corect, întregul design al paginii web va arăta ciudat. Pentru a alinia textul în Tailwind, se folosește următoarea clasă:

Opțiunile de aliniere includ „ centru ', ' stânga ', ' dreapta ', și ' justifica ”. Să înțelegem fiecare dintre aceste aliniamente folosind demonstrația de mai jos:

Explicația codului de mai sus este următoarea:

• Patru” p ” elementele sunt create și separate printr-o întrerupere de linie.
• Textul celor patru elemente p este aliniat la o anumită poziție folosind „ text-{aliniere} ” clasa.
• „ bg-{culoare}-{număr} „” oferă culoarea de fundal pentru fiecare „ p ' element.

Ieșire

Se poate vedea în rezultatul de mai jos modul în care fiecare dintre clasele de aliniere afectează poziția textului. Puteți vedea că textul primului element este aliniat ca centru, al doilea ca dreapta, al treilea ca stânga, iar al patrulea element arată text justificat:

Cum să oferiți culoare conținutului text în Tailwind?

Culoarea joacă un rol important în stilizarea conținutului text al unui element. Dacă nu este selectată o culoare adecvată, textul poate deveni greu de citit. Acest lucru va afecta negativ designul aspectului. Pentru a seta culoarea unui text în Tailwind, utilizați clasa de mai jos:

În sintaxa definită mai sus, utilizatorul trebuie să furnizeze numele culorii urmat de un număr care va fi responsabil pentru nuanța culorii specificate.

Demonstrația de mai jos are trei „ p ” elemente care sunt stilate folosind diferite clase de culori de text:

Clasele utilizate în codul de mai sus sunt următoarele:

• Primul ' p ” elementul este prevăzut cu o culoare violet folosind text-{color}-{number} ” clasa.
• Al doilea și al treilea” p ” elementele sunt prevăzute cu culorile roșu și verde folosind aceeași metodă.
• „ centru de text ” clasa poziționează conținutul textului în centrul elementului.

Ieșire

Din rezultatul de mai jos, este clar că culoarea neagră implicită a textului este schimbată în culorile specificate folosind clasa text-{color}-{number}:

Cum să utilizați diferite familii de fonturi în Tailwind?

Fontul unui element de text poate fi folosit pentru a sublinia un anumit text. Fiecare font are propriile sale caracteristici. Pentru a schimba fontul unui element în Tailwind, utilizați următoarea clasă:

Tailwind oferă trei familii de fonturi implicite, adică „ fără ', ' serif ', și ' mono ”. Fiecare dintre aceste familii de fonturi are un stil de font diferit.

În mod similar, „ grosimea fontului} ” poate fi folosită pentru a face textul bold, ușor sau normal. Să folosim o demonstrație pentru a oferi greutatea fonturilor diferitelor familii de fonturi în Tailwind:

Explicație pentru cod:

• Cei trei ' p elementele sunt furnizate de familiile de fonturi „mono”, „serf” și „sans” folosind „ familie de fonturi} ” clasa.
• În mod similar, cei trei „ p ” elementele sunt furnizate ca “ extrabold ', ' semibold ', si ' mai multa lumina ” greutatea fonturilor folosind „ grosimea fontului} ” clasa.
• Toate aceste elemente folosesc „ centru de text ” clasa care plasează textul în centrul elementului.

Ieșire

Rezultatul dat arată că fiecare „ p ” elementul are o familie de fonturi și o greutate diferită a fonturilor:

Cum să oferiți decorațiuni subliniate textului în Tailwind?

Elementele de text pot fi, de asemenea, stilizate prin adăugarea diferitelor tipuri de subliniere. Aceasta poate fi folosită pentru a sublinia o parte a unui text. Pentru a sublinia un element de text, se folosește următoarea clasă:

Cuvantul ' subliniază ” oferă o subliniere de bază pentru element și „ decorare-{stil} ” clasa este folosită pentru a oferi diferite stiluri sublinierii. Să înțelegem acest lucru folosind demonstrația oferită de mai jos:

În codul de mai sus, există patru „ p ” elemente care sunt furnizate de „ solid ', ' dubla ', ' ondulat ', și ' punctat ” subliniază stilizat.

Ieșire:

Din următorul rezultat reiese clar că elementele au fost stilate folosind diferitele clase de decorare subliniate:

Cum să furnizați indentări textului în Tailwind?

În orice document text, indentările sunt folosite pentru a formata conținutul textului. Tailwind oferă, de asemenea, o clasă implicită pentru a oferi indentare conținutului text folosind următoarea clasă:

Lățimea din sintaxa definită mai sus este responsabilă pentru dimensiunea marginii de indentare furnizată conținutului textului.

Să stilăm două elemente de text alocandu-le cu valori diferite de indentare și să vedem rezultatul:

În codul de mai sus, două „ p ” sunt prevăzute cu indentarea lățimii ” 4 ” & “ 28 ” respectiv. Primul element este, de asemenea, prevăzut cu căptușeala de sus-jos folosind „ p-12 ” clasa.

Ieșire:

Se poate vedea în rezultatul de mai jos că al doilea element de text are o marjă mai mare la începutul textului din cauza lățimii mai mari a indentării:

Acesta este totul despre stilizarea textului folosind Tailwind.

Concluzie

Tailwind oferă diferite clase pentru stilarea elementelor de text. Pentru a stila textul în Tailwind, utilizatorul poate utiliza „ text-{color}-{number} ', ' text-{aliniere} ', ' decor subliniat-{style} ', și ' indentare-{lățime} ” clasa. Acest articol a oferit un ghid pentru stilarea textului folosind diferite clase în Tailwind.