Průvodce pro stylování textu pomocí Tailwind CSS

Tento článek poskytuje průvodce úpravou stylu textu v Tailwindu pomocí následující osnovy:

• Použít třídu zarovnání textu
• Poskytněte barvy obsahu textu
• Používejte různé rodiny písem
• Poskytněte textu podtržené dekorace
• Zadejte odsazení textu

Jak používat třídu zarovnání textu v Tailwindu?

Při úpravě obsahu textu je umístění textu stejně důležité jako dekorace. Pokud text není správně zarovnán, bude celý design webové stránky vypadat zvláštně. K zarovnání textu v Tailwindu se používá následující třída:

Možnosti zarovnání zahrnují „ centrum ',' vlevo, odjet ',' že jo ', a ' ospravedlnit “. Pojďme pochopit každé z těchto zarovnání pomocí níže uvedené ukázky:

Vysvětlení výše uvedeného kódu je následující:

• Čtyři' p ” prvky jsou vytvořeny a odděleny zalomením řádku.
• Text čtyř prvků p je zarovnán na konkrétní pozici pomocí „ text-{alignment} “třída.
• ' bg-{barva}-{číslo} “třída poskytuje barvu pozadí pro každou “ p prvek.

Výstup

V níže uvedeném výstupu je vidět, jak každá z tříd zarovnání ovlivňuje pozici textu. Můžete vidět, že text prvního prvku je zarovnán na střed, druhý vpravo, třetí vlevo a čtvrtý prvek zobrazuje zarovnaný text:

Jak poskytnout barvu textovému obsahu ve službě Tailwind?

Barva hraje důležitou roli při stylování textového obsahu prvku. Pokud není vybrána vhodná barva, text může být obtížně čitelný. To negativně ovlivní návrh rozložení. Chcete-li nastavit barvu textu v Tailwindu, použijte níže uvedenou třídu:

Ve výše definované syntaxi musí uživatel zadat název barvy následovaný číslem, které bude zodpovědné za odstín zadané barvy.

Níže uvedená ukázka má tři „ p ” prvky, které jsou stylizovány pomocí různých tříd barev textu:

Třídy použité ve výše uvedeném kódu jsou následující:

• První ' p “ prvek je opatřen fialovou barvou pomocí „ text-{barva}-{číslo} “třída.
• Druhý a třetí' p ” prvky jsou opatřeny červenou a zelenou barvou pomocí stejné metody.
• ' textové centrum ” třída umístí textový obsah do středu prvku.

Výstup

Z níže uvedeného výstupu je zřejmé, že výchozí černá barva textu je změněna na zadané barvy pomocí třídy text-{color}-{number}:

Jak používat různé rodiny písem ve službě Tailwind?

Písmo textového prvku lze použít ke zvýraznění konkrétního textu. Každý font má své vlastní vlastnosti. Chcete-li změnit písmo prvku v Tailwindu, použijte následující třídu:

Tailwind poskytuje tři výchozí rodiny písem, např. bez ',' patka ', a ' mono “. Každá z těchto rodin písem má jiný styl písma.

Podobně, „ písmo-{váha} ” lze použít k tomu, aby byl text tučný, světlý nebo normální. Použijme ukázku k poskytnutí tloušťky písma různým rodinám písem v Tailwindu:

Vysvětlení kódu:

• Strom ' p Prvky jsou poskytovány rodinami písem „mono“, „serf“ a „sans“ pomocí „ font-{family} “třída.
• Podobně tři „ p 'prvky jsou poskytovány jako ' extratučný ',' polotučný “ a „ extralight ” tloušťky písem pomocí “ písmo-{váha} “třída.
• Všechny tyto prvky využívají „ textové centrum ” třída, která umístí text do středu prvku.

Výstup

Daný výstup ukazuje, že každý „ p ” prvek má jinou rodinu písem a tloušťky písem:

Jak poskytnout podtržené dekorace textu ve službě Tailwind?

Textové prvky lze také upravovat přidáním různých typů podtržení. To lze použít ke zvýraznění části textu. K podtržení textového prvku se používá následující třída:

Slovo ' zdůraznit “ poskytuje základní podtržení prvku a „ dekorace-{styl} ” se používá k poskytnutí různých stylů podtržení. Pojďme to pochopit pomocí níže poskytnuté ukázky:

Ve výše uvedeném kódu jsou čtyři „ p “ prvky, které jsou poskytovány „ pevný ',' dvojnásobek ',' vlnitý ', a ' tečkovaný “ podtrhuje styl.

Výstup:

Z následujícího výstupu je zřejmé, že prvky byly stylizovány pomocí různých podtržených tříd dekorace:

Jak poskytnout odsazení textu ve službě Tailwind?

V jakémkoli textovém dokumentu se k formátování textového obsahu používají odsazení. Tailwind také poskytuje výchozí třídu, která poskytuje odsazení textového obsahu pomocí následující třídy:

Šířka ve výše definované syntaxi je zodpovědná za velikost okraje odsazení poskytnutého obsahu textu.

Upravme styl dvou textových prvků tak, že jim přiřadíme různé hodnoty odsazení a uvidíme výsledek:

Ve výše uvedeném kódu jsou dvě „ p “ jsou opatřeny odsazením šířky “ 4 “ & “ 28 “. První prvek je také opatřen horním a spodním polstrováním pomocí „ p-12 “třída.

Výstup:

Na výstupu níže je vidět, že druhý textový prvek má větší okraj na začátku textu kvůli větší šířce odsazení:

To je vše o stylování textu pomocí Tailwind.

Závěr

Tailwind poskytuje různé třídy pro stylování textových prvků. Ke stylování textu v Tailwindu může uživatel použít „ text-{barva}-{číslo} ',' text-{alignment} ',' podtrhnout dekorace-{styl} ', a ' odsazení-{šířka} “třída. Tento článek poskytuje návod pro stylování textu pomocí různých tříd v Tailwindu.