Guide för styling av texten med Tailwind CSS

Den här artikeln ger en guide för att utforma texten i Tailwind med hjälp av följande disposition:

• Använd Text Align Class
• Ge färger till textinnehåll
• Använd olika teckensnittsfamiljer
• Ge texten understrykningsdekorationer
• Ge indrag i texten

Hur man använder Text Align Class i medvind?

När du stylar textinnehållet är placeringen av texten lika viktig som dekorationen. Om texten inte är korrekt justerad kommer hela designen på webbsidan att se udda ut. För att justera text i Tailwind används följande klass:

Justeringsalternativen inkluderar ' Centrum ', ' vänster ', ' höger ', och ' rättfärdiga ”. Låt oss förstå var och en av dessa anpassningar med hjälp av nedanstående demonstration:

Förklaringen av ovanstående kod är följande:

• fyra ' sid ” element skapas och separeras med en radbrytning.
• Texten i de fyra p-elementen justeras till en specifik position med hjälp av ' text-{alignment} ' klass.
• den ' bg-{color}-{number} ' klass ger bakgrundsfärgen för varje ' sid ' element.

Produktion

Det kan ses i utgången nedan hur var och en av justeringsklasserna påverkar textpositionen. Du kan se att det första elementets text är mittjusterat, det andra som höger, det tredje som vänster och det fjärde elementet visar justerad text:

Hur ger man färg till textinnehåll i medvind?

Färg spelar en viktig roll för att utforma textinnehållet i ett element. Om en lämplig färg inte väljs kan texten bli svår att läsa. Detta kommer att påverka utformningen av layouten negativt. För att ställa in färgen på en text i Tailwind, använd nedanstående klass:

I den ovan definierade syntaxen måste användaren ange namnet på färgen följt av ett nummer som kommer att ansvara för nyansen av den angivna färgen.

Den nedan tillhandahållna demonstrationen har tre ' sid '-element som är formaterade med olika textfärgklasser:

Klasserna som används i ovanstående kod är följande:

• Den första ' sid elementet förses med en violett färg med hjälp av ' text-{color}-{number} ' klass.
• Den andra och tredje ' sid ” element förses med de röda och gröna färgerna med samma metod.
• den ' text-center ” klass placerar textinnehållet i mitten av elementet.

Produktion

Från utdata nedan är det tydligt att den svarta standardfärgen för texten ändras till de angivna färgerna med klassen text-{color}-{number}:

Hur använder man olika teckensnittsfamiljer i medvind?

Teckensnittet för ett textelement kan användas för att framhäva en specifik text. Varje typsnitt har sina egna egenskaper. För att ändra teckensnittet för ett element i Tailwind, använd följande klass:

Tailwind tillhandahåller tre standardteckensnittsfamiljer, dvs. utan ', ' serif ', och ' mono ”. Var och en av dessa teckensnittsfamiljer har olika teckensnittsstil.

På samma sätt har ' font-{weight} ” klass kan användas för att göra texten fet, lätt eller normal. Låt oss använda en demonstration för att ge teckensnittsvikt till olika teckensnittsfamiljer i Tailwind:

Förklaring till koden:

• De tre ' sid '-element tillhandahålls av 'mono', 'serf' och 'sans' teckensnittsfamiljer med ' typsnittsfamilj} ' klass.
• På samma sätt, de tre ' sid ' element tillhandahålls som ' extrabold ', ' halvfet ', och den ' extra ljus ' teckensnittsvikter med ' font-{weight} ' klass.
• Alla dessa element använder ' text-center ” klass som placerar texten i mitten av elementet.

Produktion

Den givna utdata visar att varje ' sid ”-elementet har en annan typsnittsfamilj och teckensnittsvikter:

Hur ger man understrykningsdekorationer till texten i medvind?

Textelement kan också utformas genom att lägga till olika typer av understrykningar. Detta kan användas för att framhäva en del av en text. För att understryka ett textelement används följande klass:

Ordet ' Understrykning ' ger en grundläggande understrykning av elementet och ' dekoration-{stil} ” klass används för att ge olika stilar till understrykningen. Låt oss förstå detta med hjälp av nedanstående demonstration:

I ovanstående kod finns det fyra ' sid ' element som tillhandahålls av ' fast ', ' dubbel ', ' vågig ', och ' prickad ” stilade understrykningar.

Produktion:

Det framgår tydligt av följande utdata att elementen har utformats med de olika understrukna dekorationsklasserna:

Hur ger man indrag i texten i medvind?

I alla textdokument används indrag för att formatera textinnehåll. Tailwind tillhandahåller också en standardklass för att ge indrag till textinnehåll med följande klass:

Bredden i den ovan definierade syntaxen är ansvarig för storleken på indragsmarginalen som ges till textinnehållet.

Låt oss utforma två textelement genom att tilldela dem olika indragsvärden och se resultatet:

I ovanstående kod, två ' sid ' är försedda med indragningen av bredden ' 4 ” & “ 28 ' respektive. Det första elementet är också försett med stoppning upptill och nedtill med hjälp av ' s-12 ' klass.

Produktion:

Det kan ses i utdata nedan att det andra textelementet har en större marginal i början av texten på grund av den större indragningsbredden:

Det handlar om att styla texten med Tailwind.

Slutsats

Tailwind tillhandahåller olika klasser för styling av textelement. För att stila texten i Tailwind kan användaren använda ' text-{color}-{number} ', ' text-{alignment} ', ' understryka dekoration-{stil} ', och ' indrag-{width} ' klass. Den här artikeln har gett en guide för att utforma texten med olika klasser i Tailwind.