Handleiding voor het opmaken van de tekst met Tailwind CSS

Dit artikel biedt een handleiding voor het opmaken van de tekst in Tailwind met behulp van het volgende overzicht:

• Gebruik Tekstuitlijnklasse
• Geef kleuren aan tekstinhoud
• Gebruik verschillende lettertypefamilies
• Zorg voor onderstrepingsversieringen voor de tekst
• Zorg voor inkepingen in de tekst

Hoe gebruik ik Text Align Class in Tailwind?

Bij het stylen van de tekstinhoud is de positionering van de tekst net zo belangrijk als de decoratie. Als de tekst niet goed is uitgelijnd, ziet het hele ontwerp van de webpagina er vreemd uit. Om tekst in Tailwind uit te lijnen, wordt de volgende klasse gebruikt:

De uitlijningsopties omvatten “ centrum ', ' links ', ' rechts ', En ' verantwoorden ”. Laten we elk van deze uitlijningen begrijpen met behulp van de onderstaande demonstratie:

De uitleg van de bovenstaande code is als volgt:

• Vier “ P ”-elementen worden gemaakt en gescheiden door een regeleinde.
• De tekst van de vier p-elementen wordt uitgelijnd op een specifieke positie met behulp van de “ tekstuitlijning} ' klas.
• De ' bg-{kleur}-{nummer} ” klasse biedt de achtergrondkleur voor elke “ P ”-element.

Uitvoer

In de onderstaande uitvoer kunt u zien hoe elk van de uitlijningsklassen de tekstpositie beïnvloedt. Je kunt zien dat de tekst van het eerste element in het midden is uitgelijnd, het tweede als rechts, het derde als links, en dat het vierde element uitgevulde tekst toont:

Hoe geef ik kleur aan tekstinhoud in Tailwind?

Kleur speelt een belangrijke rol bij het vormgeven van de tekstinhoud van een element. Als er geen geschikte kleur wordt geselecteerd, kan de tekst moeilijk leesbaar worden. Dit heeft een negatief effect op het ontwerp van de lay-out. Om de kleur van een tekst in Tailwind in te stellen, gebruik je de onderstaande klasse:

In de hierboven gedefinieerde syntaxis moet de gebruiker de naam van de kleur opgeven, gevolgd door een getal dat verantwoordelijk is voor de tint van de opgegeven kleur.

De onderstaande demonstratie heeft drie “ P ”-elementen die zijn opgemaakt met verschillende tekstkleurklassen:

De klassen die in de bovenstaande code worden gebruikt, zijn als volgt:

• De eerste ' P ”-element wordt voorzien van een violette kleur met behulp van de “ tekst-{kleur}-{nummer} ' klas.
• De tweede en derde “ P ”-elementen worden op dezelfde manier voorzien van de kleuren rood en groen.
• De ' tekst-centrum ” klasse positioneert de tekstinhoud in het midden van het element.

Uitvoer

Uit de onderstaande uitvoer blijkt duidelijk dat de standaard zwarte kleur van de tekst wordt gewijzigd in de opgegeven kleuren met behulp van de klasse text-{color}-{number}:

Hoe verschillende lettertypefamilies gebruiken in Tailwind?

Het lettertype van een tekstelement kan worden gebruikt om een ​​specifieke tekst te benadrukken. Elk lettertype heeft zijn eigen kenmerken. Gebruik de volgende klasse om het lettertype van een element in Tailwind te wijzigen:

Tailwind biedt drie standaardlettertypefamilies, d.w.z. “ zonder ', ' schreef ', En ' mono ”. Elk van deze lettertypefamilies heeft een andere lettertypestijl.

Op dezelfde manier is de “ lettertype dikte} De klasse kan worden gebruikt om de tekst vet, licht of normaal te maken. Laten we een demonstratie gebruiken om lettertypegewicht te geven aan verschillende lettertypefamilies in Tailwind:

Uitleg voor de code:

• De boom ' P '-elementen worden geleverd door de lettertypefamilies 'mono', 'serf' en 'sans' met behulp van de ' lettertype-{familie} ' klas.
• Op dezelfde manier zijn de drie “ P '-elementen worden geleverd als' extravet ', ' halfvet ', en de ' extra licht ” lettertypegewichten met behulp van de “ lettertype dikte} ' klas.
• Al deze elementen gebruiken de “ tekst-centrum ”klasse die de tekst in het midden van het element plaatst.

Uitvoer

De gegeven uitvoer laat zien dat elke “ P ”-element heeft een andere lettertypefamilie en lettertypegewichten:

Hoe kan ik tekst onderstrepen in Tailwind?

Tekstelementen kunnen ook worden opgemaakt door verschillende soorten onderstrepingen toe te voegen. Dit kan worden gebruikt om een ​​deel van een tekst te benadrukken. Om een ​​tekstelement te onderstrepen, wordt de volgende klasse gebruikt:

Het woord ' onderstrepen ” geeft een fundamentele onderstreping van het element en de “ decoratie-{stijl} ”-klasse wordt gebruikt om verschillende stijlen aan de onderstreping te geven. Laten we dit begrijpen met behulp van de onderstaande demonstratie:

In de bovenstaande code zijn er vier “ P ” elementen die worden geleverd door de “ stevig ', ' dubbele ', ' golvend ', En ' gestippeld ’ onderstreept.

Uitgang:

Uit de volgende uitvoer blijkt duidelijk dat de elementen zijn vormgegeven met behulp van de verschillende onderstreepte decoratieklassen:

Hoe kan ik inspringingen in de tekst aanbrengen in Tailwind?

In elk tekstdocument worden inspringingen gebruikt om de tekstinhoud op te maken. Tailwind biedt ook een standaardklasse om tekstinhoud te laten inspringen met behulp van de volgende klasse:

De breedte in de hierboven gedefinieerde syntaxis is verantwoordelijk voor de grootte van de inspringmarge die aan de tekstinhoud wordt gegeven.

Laten we twee tekstelementen opmaken door ze verschillende inspringingswaarden toe te wijzen en het resultaat te bekijken:

In de bovenstaande code zijn twee “ P ” zijn voorzien van de inkeping van de breedte “ 4 ” & “ 28 ”respectievelijk. Het eerste element is tevens voorzien van de top-bottom opvulling met behulp van de “ p-12 ' klas.

Uitgang:

In de onderstaande uitvoer is te zien dat het tweede tekstelement een grotere marge heeft aan het begin van de tekst vanwege de grotere inspringbreedte:

Dat draait allemaal om het opmaken van de tekst met Tailwind.

Conclusie

Tailwind biedt verschillende klassen voor het opmaken van tekstelementen. Om de tekst in Tailwind op te maken, kan de gebruiker gebruik maken van “ tekst-{kleur}-{nummer} ', ' tekstuitlijning} ', ' decoratie onderstrepen-{stijl} ', En ' streepje-{breedte} ' klas. Dit artikel biedt een handleiding voor het opmaken van de tekst met behulp van verschillende klassen in Tailwind.