Przewodnik po stylizowaniu tekstu za pomocą CSS Tailwind

W tym artykule znajdziesz przewodnik dotyczący stylizowania tekstu w Tailwind, korzystając z następującego schematu:

• Użyj klasy wyrównania tekstu
• Dodaj kolory do treści tekstowych
• Użyj różnych rodzin czcionek
• Dodaj podkreślenia do tekstu
• Dodaj wcięcia do tekstu

Jak korzystać z klasy Text Align w Tailwind?

Podczas stylizacji treści tekstowej równie ważne jak dekoracja jest jej rozmieszczenie. Jeśli tekst nie będzie odpowiednio wyrównany, cały projekt strony będzie wyglądał dziwnie. Aby wyrównać tekst w Tailwind, używana jest następująca klasa:

Opcje wyrównania obejmują „ Centrum „”, „ lewy „”, „ Prawidłowy ', I ' uzasadniać ”. Przyjrzyjmy się każdemu z tych dopasowań, korzystając z poniższej demonstracji:

Wyjaśnienie powyższego kodu jest następujące:

• Cztery „ P ” elementy są tworzone i oddzielane podziałem wiersza.
• Tekst czterech elementów p jest wyrównywany do określonej pozycji za pomocą przycisku „ wyrównanie tekstu} ' klasa.
• „ bg-{kolor}-{liczba} ” zapewnia kolor tła dla każdego „ P ' element.

Wyjście

Na poniższym wyjściu można zobaczyć, jak każda z klas wyrównania wpływa na położenie tekstu. Możesz zobaczyć, że tekst pierwszego elementu jest wyrównany do środka, drugiego do prawej, trzeciego do lewej, a czwarty element wyświetla tekst wyjustowany:

Jak nadać kolor zawartości tekstowej w Tailwind?

Kolor odgrywa ważną rolę w stylizacji zawartości tekstowej elementu. Jeśli nie zostanie wybrany odpowiedni kolor, tekst może stać się trudny do odczytania. Wpłynie to negatywnie na projekt układu. Aby ustawić kolor tekstu w Tailwind, użyj poniższej klasy:

W powyższej składni należy podać nazwę koloru, po której następuje liczba, która będzie odpowiadać za odcień określonego koloru.

Poniższa demonstracja składa się z trzech „ P ” elementy stylizowane przy użyciu różnych klas kolorów tekstu:

Klasy użyte w powyższym kodzie są następujące:

• Pierwszy ' P ” elementowi nadajemy kolor fioletowy za pomocą przycisku „ tekst-{kolor}-{numer} ' klasa.
• Drugi i trzeci” P ” elementy nadawane są w ten sam sposób w kolorze czerwonym i zielonym.
• „ centrum tekstowe ” class umieszcza treść tekstową na środku elementu.

Wyjście

Z poniższego wyniku jasno wynika, że ​​domyślny czarny kolor tekstu jest zmieniany na określone kolory za pomocą klasy text-{color}-{number}:

Jak używać różnych rodzin czcionek w Tailwind?

Czcionka elementu tekstowego może zostać użyta do podkreślenia określonego tekstu. Każda czcionka ma swoją własną charakterystykę. Aby zmienić czcionkę elementu w Tailwind, użyj następującej klasy:

Tailwind udostępnia trzy domyślne rodziny czcionek, tj. „ bez „”, „ szeryf ', I ' mononukleoza ”. Każda z tych rodzin czcionek ma inny styl czcionki.

Podobnie „ grubość czcionki} ” można zastosować, aby tekst był pogrubiony, jasny lub normalny. Skorzystajmy z demonstracji, aby zapewnić grubość czcionki różnym rodzinom czcionek w Tailwind:

Wyjaśnienie kodu:

• Drzewo ' P ” są dostarczane przez rodziny czcionek „mono”, „serf” i „sans” przy użyciu „ rodzina czcionek} ' klasa.
• Podobnie trzy „ P ” elementy są dostarczane jako „ ekstraodważny „”, „ półpogrubione ” i „ Super jasny ” grubości czcionek za pomocą opcji „ grubość czcionki} ' klasa.
• Wszystkie te elementy wykorzystują „ centrum tekstowe ”, która umieszcza tekst w środku elementu.

Wyjście

Dane wyjście pokazuje, że każdy „ P ” ma inną rodzinę czcionek i grubości czcionek:

Jak zapewnić podkreślenie tekstu w Tailwind?

Elementy tekstowe można również stylizować, dodając różne rodzaje podkreśleń. Można tego użyć do podkreślenia części tekstu. Aby podkreślić element tekstowy, używana jest następująca klasa:

Słowo ' podkreślać ” stanowi podstawowe podkreślenie elementu, a „ dekoracja-{styl} ” służy do zapewnienia różnych stylów podkreślenia. Rozumiemy to, korzystając z poniższej demonstracji:

W powyższym kodzie znajdują się cztery „ P elementy dostarczane przez „ solidny „”, „ podwójnie „”, „ falisty ', I ' kropkowany – podkreśla stylizacja.

Wyjście:

Z poniższego wyniku jasno wynika, że ​​elementy zostały stylizowane przy użyciu różnych, podkreślonych klas dekoracji:

Jak zapewnić wcięcia w tekście w Tailwind?

W każdym dokumencie tekstowym wcięcia służą do formatowania treści tekstowej. Tailwind udostępnia także domyślną klasę umożliwiającą wcięcie treści tekstowej przy użyciu następującej klasy:

Szerokość w wyżej zdefiniowanej składni odpowiada za wielkość marginesu wcięcia nadawanego treści tekstowej.

Nadajmy styl dwóm elementom tekstowym, przypisując im różne wartości wcięć i zobaczmy wynik:

W powyższym kodzie dwa „ P ” posiadają wcięcie szerokości „ 4 ” i „ 28 odpowiednio. Pierwszy element dodatkowo wyposażony jest w wyściółkę górno-dółową za pomocą „ str. 12 ' klasa.

Wyjście:

Na poniższym wyjściu widać, że drugi element tekstowy ma większy margines na początku tekstu ze względu na większą szerokość wcięcia:

Chodzi o stylizację tekstu za pomocą Tailwind.

Wniosek

Tailwind udostępnia różne klasy do stylizacji elementów tekstowych. Aby nadać styl tekstowi w Tailwind, użytkownik może użyć „ tekst-{kolor}-{numer} „”, „ wyrównanie tekstu} „”, „ podkreśl dekorację-{styl} ', I ' wcięcie-{szerokość} ' klasa. W tym artykule przedstawiono przewodnik dotyczący stylizowania tekstu przy użyciu różnych klas w Tailwind.