Guide til styling af teksten ved hjælp af Tailwind CSS

Denne artikel vil give en guide til styling af teksten i Tailwind ved hjælp af følgende disposition:

• Brug tekstjusteringsklasse
• Giv farver til tekstindhold
• Brug forskellige skrifttypefamilier
• Giv teksten understregningsdekorationer
• Angiv fordybninger til teksten

Hvordan bruger man tekstjusteringsklasse i medvind?

Når du styler tekstindholdet, er placeringen af ​​teksten lige så vigtig som dekorationen. Hvis teksten ikke er korrekt justeret, vil hele designet af websiden se mærkeligt ud. For at justere tekst i Tailwind, bruges følgende klasse:

Justeringsmulighederne inkluderer ' centrum ', ' venstre ', ' højre ', og ' retfærdiggøre ”. Lad os forstå hver af disse justeringer ved hjælp af nedenstående demonstration:

Forklaringen af ​​ovenstående kode er som følger:

• fire' s ” elementer oprettes og adskilles af et linjeskift.
• Teksten i de fire p-elementer justeres til en bestemt position ved hjælp af ' tekst-{alignment} ' klasse.
• Det ' bg-{color}-{number} ' klasse giver baggrundsfarven for hver ' s ' element.

Produktion

Det kan ses i nedenstående output, hvordan hver af justeringsklasserne påvirker tekstpositionen. Du kan se, at det første elements tekst er midtstillet, det andet som højre, det tredje som venstre, og det fjerde element viser justeret tekst:

Hvordan giver man farve til tekstindhold i medvind?

Farve spiller en vigtig rolle i stylingen af ​​tekstindholdet i et element. Hvis en passende farve ikke er valgt, kan teksten blive svær at læse. Dette vil negativt påvirke designet af layoutet. For at indstille farven på en tekst i Tailwind, brug nedenstående klasse:

I den ovenfor definerede syntaks skal brugeren angive navnet på farven efterfulgt af et tal, der vil være ansvarlig for nuancen af ​​den angivne farve.

Nedenstående demonstration har tre ' s ' elementer, der er stylet ved hjælp af forskellige tekstfarveklasser:

Klasserne brugt i ovenstående kode er som følger:

• Den første ' s '-elementet er forsynet med en violet farve ved hjælp af ' tekst-{farve}-{nummer} ' klasse.
• Den anden og tredje ' s ” elementer forsynes med de røde og grønne farver ved hjælp af samme metode.
• Det ' tekst-center ” klasse placerer tekstindholdet i midten af ​​elementet.

Produktion

Fra nedenstående output er det klart, at den sorte standardfarve på teksten ændres til de angivne farver ved hjælp af klassen text-{color}-{number}:

Hvordan bruger man forskellige skrifttypefamilier i medvind?

Skrifttypen på et tekstelement kan bruges til at fremhæve en bestemt tekst. Hver skrifttype har sine egne karakteristika. For at ændre skrifttypen på et element i Tailwind skal du bruge følgende klasse:

Tailwind giver tre standard skrifttypefamilier, dvs. uden ', ' serif ', og ' mono ”. Hver af disse skrifttypefamilier har en anden skrifttypestil.

Tilsvarende er ' skrifttype-{vægt} ” klasse kan bruges til at gøre teksten fed, let eller normal. Lad os bruge en demonstration til at give skrifttypevægt til forskellige skrifttypefamilier i Tailwind:

Forklaring på koden:

• De tre ' s '-elementer leveres af 'mono', 'serf' og 'sans' skrifttypefamilier ved hjælp af ' skrifttype-{familie} ' klasse.
• Tilsvarende har de tre ' s '-elementer leveres som ' ekstrafed ', ' halvfed ', og ' ekstralys ' skrifttypevægte ved hjælp af ' skrifttype-{vægt} ' klasse.
• Alle disse elementer bruger ' tekst-center ” klasse, som placerer teksten i midten af ​​elementet.

Produktion

Det givne output viser, at hver ' s ”-elementet har en anden skrifttypefamilie og skrifttypevægte:

Hvordan giver man understregningsdekorationer til teksten i medvind?

Tekstelementer kan også styles ved at tilføje forskellige typer understregninger. Dette kan bruges til at understrege en del af en tekst. For at give understregninger til et tekstelement bruges følgende klasse:

Ordet ' understrege ' giver en grundlæggende understregning af elementet og ' dekoration-{stil} ” klasse bruges til at give forskellige stilarter til understregningen. Lad os forstå dette ved at bruge nedenstående demonstration:

I ovenstående kode er der fire ' s ' elementer, der leveres af ' solid ', ' dobbelt ', ' bølget ', og ' prikket ” stylet understregning.

Produktion:

Det fremgår tydeligt af følgende output, at elementerne er blevet stylet ved hjælp af de forskellige understregede dekorationsklasser:

Hvordan giver man indrykninger til teksten i medvind?

I ethvert tekstdokument bruges indrykninger til at formatere tekstindhold. Tailwind giver også en standardklasse til at give indrykning til tekstindhold ved hjælp af følgende klasse:

Bredden i den ovenfor definerede syntaks er ansvarlig for størrelsen af ​​indrykningsmargenen til tekstindholdet.

Lad os style to tekstelementer ved at tildele dem forskellige indrykningsværdier og se resultatet:

I ovenstående kode er to ' s ' er forsynet med indrykning af bredden ' 4 ' & ' 28 ' henholdsvis. Det første element er også forsynet med top-bund polstring ved hjælp af ' s-12 ' klasse.

Produktion:

Det kan ses i nedenstående output, at det andet tekstelement har en større margen i starten af ​​teksten på grund af den større indrykningsbredde:

Det handler om at style teksten ved hjælp af Tailwind.

Konklusion

Tailwind tilbyder forskellige klasser til styling af tekstelementer. For at style teksten i Tailwind kan brugeren bruge ' tekst-{farve}-{nummer} ', ' tekst-{alignment} ', ' understreg dekoration-{stil} ', og ' indrykning-{bredde} ' klasse. Denne artikel har givet en guide til styling af teksten ved hjælp af forskellige klasser i Tailwind.