В этой статье представлено руководство по стилизации текста в Tailwind, используя следующую схему:
- Использовать класс выравнивания текста
- Раскрасьте текстовое содержимое
- Используйте разные семейства шрифтов
- Добавьте подчеркивание к тексту
- Сделайте отступы к тексту
Как использовать класс выравнивания текста в Tailwind?
При стилизации текстового содержимого расположение текста так же важно, как и оформление. Если текст не выровнен должным образом, весь дизайн веб-страницы будет выглядеть странно. Для выравнивания текста в Tailwind используется следующий класс:
текст- { выравнивание }
Варианты выравнивания включают в себя: « центр ', ' левый ', ' верно ', и ' оправдывать ». Давайте разберемся с каждым из этих выравниваний, используя приведенную ниже демонстрацию:
< п сорт '=' 'текстовый центр bg-slate-200' > Это образец текста, который имеет выравнивание по ЦЕНТРУ ТЕКСТА. < / п >
< бр >
< п сорт '=' 'текст-право bg-slate-200' > Это образец текста, который имеет выравнивание ТЕКСТ ПРАВО. < / п >
< бр >
< п сорт '=' 'текст-левый bg-slate-200' > Это образец текста, который имеет выравнивание ТЕКСТ ПО ЛЕВОМУ краю. < / п >
< бр >
< п сорт '=' 'текстовое выравнивание bg-slate-200' > Это образец текста, который имеет выравнивание TEXT JUSTIFY. < / п >
Объяснение приведенного выше кода следующее:
- Четыре» п ” элементы создаются и разделяются переносом строки.
- Текст четырех элементов p выравнивается по определенной позиции с помощью « текст-{выравнивание} ' сорт.
- « bg-{цвет}-{число} Класс ” предоставляет цвет фона для каждого “ п элемент.
Выход
На приведенном ниже выводе видно, как каждый из классов выравнивания влияет на положение текста. Вы можете видеть, что текст первого элемента выровнен по центру, второго — по правому краю, третьего — по левому, а четвёртый элемент отображает выровненный текст:
Как обеспечить цвет текстового содержимого в Tailwind?
Цвет играет важную роль в стилизации текстового содержимого элемента. Если не выбран подходящий цвет, текст может стать трудночитаемым. Это негативно скажется на дизайне планировки. Чтобы установить цвет текста в Tailwind, используйте приведенный ниже класс:
текст- { цвет } - { число }В приведенном выше синтаксисе пользователь должен указать имя цвета, за которым следует число, которое будет отвечать за оттенок указанного цвета.
Приведенная ниже демонстрация имеет три « п ” элементы, оформленные с использованием разных классов цвета текста:
< п сорт '=' 'текст-фиолетовый-500 текстовый центр' > Это текст фиолетового цвета < / п >< п сорт '=' 'текст-красный-500 текстовый центр' > Это текст красного цвета < / п >
< п сорт '=' 'текст-зеленый-500 текстовый центр' > Это текст зеленого цвета < / п >
В приведенном выше коде используются следующие классы:
- Первый ' п Элементу ” присвоен фиолетовый цвет с помощью параметра “ текст-{цвет}-{число} ' сорт.
- Второй и третий» п ” элементам присваиваются красный и зеленый цвета, используя тот же метод.
- « текстовый центр Класс ” позиционирует текстовое содержимое в центр элемента.
Выход
Из приведенного ниже вывода ясно, что черный цвет текста по умолчанию меняется на указанные цвета с использованием класса text-{color}-{number}:
Как использовать разные семейства шрифтов в Tailwind?
Шрифт текстового элемента можно использовать для выделения определенного текста. Каждый шрифт имеет свои особенности. Чтобы изменить шрифт элемента в Tailwind, используйте следующий класс:
шрифт- { семья }Tailwind предоставляет три семейства шрифтов по умолчанию, т.е. « без ', ' с засечками ', и ' мононуклеоз ». Каждое из этих семейств шрифтов имеет свой стиль шрифта.
Аналогично, « шрифт-{вес} Класс ” можно использовать, чтобы сделать текст жирным, светлым или обычным. Давайте воспользуемся демонстрацией, чтобы указать вес шрифта для разных семейств шрифтов в Tailwind:
< п сорт '=' 'шрифт-моно шрифт-экстражирный текстовый центр' > Это очень жирный текст шрифтом MONO. < / п >< п сорт '=' 'шрифт-засечки шрифт-полужирный текст-центр' > Это полужирный текст шрифтом SERIF. < / п >
< п сорт '=' «шрифт-без шрифта-extralight text-center» > Это очень легкий текст шрифтом SANS. < / п >
Пояснение к коду:
- Три ' п Элементы «» предоставляются семействами шрифтов «mono», «serf» и «sans» с использованием « семейство шрифтов} ' сорт.
- Аналогично, три « п элементы предоставляются как « экстражирный ', ' полужирный », и « сверхлегкий ” вес шрифта с использованием “ шрифт-{вес} ' сорт.
- Все эти элементы используют « текстовый центр », который помещает текст в центр элемента.
Выход
Данные результаты показывают, что каждый « п ” элемент имеет другое семейство шрифтов и толщину шрифта:
Как обеспечить подчеркивание текста в Tailwind?
Текстовые элементы также можно стилизовать, добавляя различные типы подчеркиваний. Это можно использовать для выделения части текста. Чтобы подчеркнуть текстовый элемент, используется следующий класс:
подчеркнуть украшение- { стиль }Слово ' подчеркнуть ” обеспечивает основное подчеркивание элемента и “ украшение-{стиль} Класс ” используется для предоставления различных стилей подчеркивания. Давайте поймем это, используя приведенную ниже демонстрацию:
< п сорт '=' 'подчеркнуть оформление-сплошной текст-центр' > Этот текст имеет сплошное подчеркивание < / п >< п сорт '=' «подчеркнуть оформление-двойной текстовый центр» > Этот текст имеет двойное подчеркивание < / п >
< п сорт '=' «подчеркнуть оформление-волнистый текст-центр» > Этот текст имеет волнистую линию подчеркивания < / п >
< п сорт '=' «подчеркнуть центр текста с декоративным пунктиром» > Этот текст имеет пунктирное подчеркивание < / п >
В приведенном выше коде есть четыре « п ” элементы, предоставляемые “ твердый ', ' двойной ', ' волнистый ', и ' пунктирный стилизованное подчеркивание.
Выход:
Из следующего вывода ясно, что элементы были стилизованы с использованием различных подчеркнутых классов оформления:
Как сделать отступы к тексту в Tailwind?
В любом текстовом документе отступы используются для форматирования текстового содержимого. Tailwind также предоставляет класс по умолчанию для создания отступов к текстовому содержимому, используя следующий класс:
отступ- { ширина }Ширина в синтаксисе, определенном выше, отвечает за размер поля отступа, предоставляемого текстовому содержимому.
Давайте стилизуем два текстовых элемента, присвоив им разные значения отступов, и посмотрим результат:
< п сорт '=' 'отступ-4 ру-12' > Это образец текста, для него предусмотрен отступ с использованием класса «indent-4». < / п >< п сорт '=' 'отступ-28' > Это образец текста, для него предусмотрен отступ с использованием класса «indent-28». < / п >
В приведенном выше коде два « п ” снабжены отступом ширины “ 4 » & « 28 ' соответственно. Первый элемент также снабжен отступом сверху вниз с использованием « р-12 ' сорт.
Выход:
В выводе ниже видно, что второй текстовый элемент имеет больший запас в начале текста из-за большей ширины отступа:
Это все, что касается стилизации текста с помощью Tailwind.
Заключение
Tailwind предоставляет различные классы для стилизации текстовых элементов. Чтобы стилизовать текст в Tailwind, пользователь может использовать « текст-{цвет}-{число} ', ' текст-{выравнивание} ', ' подчеркнуть украшение-{стиль} ', и ' отступ-{ширина} ' сорт. В этой статье представлено руководство по стилизации текста с использованием различных классов Tailwind.