Ръководство за стилизиране на текста с помощта на Tailwind CSS

Тази статия ще предостави ръководство за стилизиране на текста в Tailwind, използвайки следната схема:

• Използвайте класа за подравняване на текст
• Осигурете цветове на текстовото съдържание
• Използвайте различни семейства шрифтове
• Осигурете декорации за подчертаване на текста
• Осигурете отстъпи на текста

Как да използвам класа за подравняване на текст в Tailwind?

Докато стилизирате текстовото съдържание, позиционирането на текста е толкова важно, колкото и декорацията. Ако текстът не е правилно подравнен, целият дизайн на уеб страницата ще изглежда странно. За подравняване на текст в Tailwind се използва следният клас:

Опциите за подравняване включват „ център ', ' наляво ', ' точно ', и ' оправдавам ”. Нека разберем всяко от тези подравнявания, като използваме демонстрацията по-долу:

Обяснението на горния код е както следва:

• четири “ стр ” елементите се създават и разделят с нов ред.
• Текстът на четирите p елемента е подравнен към определена позиция с помощта на „ текст-{подравняване} ” клас.
• „ bg-{цвят}-{номер} ” предоставя фонов цвят за всеки “ стр ” елемент.

Изход

Може да се види в изхода по-долу как всеки от класовете за подравняване влияе върху позицията на текста. Можете да видите, че текстът на първия елемент е подравнен като център, вторият като дясно, третият като ляв, а четвъртият елемент показва оправдан текст:

Как да предоставим цвят на текстово съдържание в Tailwind?

Цветът играе важна роля в стилизирането на текстовото съдържание на елемент. Ако не е избран подходящ цвят, текстът може да стане труден за четене. Това ще се отрази негативно на дизайна на оформлението. За да зададете цвета на текст в Tailwind, използвайте дадения по-долу клас:

В дефинирания по-горе синтаксис потребителят трябва да предостави името на цвета, последвано от число, което ще отговаря за нюанса на посочения цвят.

Предоставената по-долу демонстрация има три „ стр ” елементи, които са стилизирани с помощта на различни цветови класове на текста:

Класовете, използвани в горния код, са както следва:

• Първият ' стр ” елементът е снабден с виолетов цвят с помощта на „ текст-{цвят}-{число} ” клас.
• Второто и третото' стр ” елементите се предоставят с червени и зелени цветове по същия метод.
• „ текстов център ” позиционира текстовото съдържание в центъра на елемента.

Изход

От изхода по-долу става ясно, че черният цвят по подразбиране на текста се променя на посочените цветове с помощта на класа text-{color}-{number}:

Как да използвам различни семейства шрифтове в Tailwind?

Шрифтът на текстов елемент може да се използва за подчертаване на конкретен текст. Всеки шрифт има свои собствени характеристики. За да промените шрифта на елемент в Tailwind, използвайте следния клас:

Tailwind предоставя три семейства шрифтове по подразбиране, т.е. без ', ' сериф ', и ' моно ”. Всяко от тези семейства шрифтове има различен шрифтов стил.

По същия начин „ шрифт-{тегло} ” може да се използва, за да направите текста удебелен, светъл или нормален. Нека използваме демонстрация, за да предоставим тегло на шрифта на различни семейства шрифтове в Tailwind:

Обяснение за кода:

• Трите ' стр ” се предоставят от фамилии шрифтове „mono”, „servf” и „sans”, използващи „ шрифтово семейство} ” клас.
• По същия начин трите „ стр ” елементите са предоставени като „ екстраболд ', ' получерен “, и „ свръхлек ” тегло на шрифта с помощта на „ шрифт-{тегло} ” клас.
• Всички тези елементи използват „ текстов център ”, който поставя текста в центъра на елемента.

Изход

Даденият изход показва, че всеки „ стр ” има различно семейство шрифтове и тегла на шрифта:

Как да осигуря декорации за подчертаване на текста в Tailwind?

Текстовите елементи могат също да бъдат стилизирани чрез добавяне на различни видове подчертавания. Това може да се използва за подчертаване на част от текст. За да предоставите подчертаване на текстов елемент, се използва следният клас:

Думата ' подчертавам ” осигурява основно подчертаване на елемента и „ декорация-{стил} ” клас се използва за предоставяне на различни стилове на подчертаването. Нека разберем това с помощта на предоставената по-долу демонстрация:

В горния код има четири „ стр ” елементи, предоставени от „ твърдо ', ' двойно ', ' вълнообразен ', и ' пунктиран ” стилизирано подчертава.

Изход:

От следния резултат става ясно, че елементите са стилизирани с помощта на различните подчертани класове за декорация:

Как да осигурим вдлъбнатини на текста в Tailwind?

Във всеки текстов документ вдлъбнатините се използват за форматиране на текстово съдържание. Tailwind също предоставя клас по подразбиране за предоставяне на отстъп на текстовото съдържание, като използва следния клас:

Ширината в дефинирания по-горе синтаксис отговаря за размера на полето за отстъп, предоставено на текстовото съдържание.

Нека стилизираме два текстови елемента, като им присвоим различни стойности на отстъпа и видим резултата:

В горния код две „ стр ” са снабдени с отстъп на ширината „ 4 ” & “ 28 ” съответно. Първият елемент също е снабден с горна-долна подложка с помощта на „ стр-12 ” клас.

Изход:

Може да се види в резултата по-долу, че вторият текстов елемент има по-голямо поле в началото на текста поради по-голямата ширина на отстъпа:

Това е всичко за стилизирането на текста с помощта на Tailwind.

Заключение

Tailwind предоставя различни класове за стилизиране на текстови елементи. За да оформите текста в Tailwind, потребителят може да използва „ текст-{цвят}-{число} ', ' текст-{подравняване} ', ' подчертаване на декорация-{стил} ', и ' отстъп-{ширина} ” клас. Тази статия предоставя ръководство за стилизиране на текста с помощта на различни класове в Tailwind.