В этой статье представлена процедура управления семейством шрифтов элемента с помощью утилит Tailwind.
Как управлять семейством шрифтов элемента с помощью утилит Tailwind?
Чтобы управлять семейством шрифтов элемента в Tailwind, элементу необходимо предоставить следующую утилиту:
шрифт- { семейство шрифтов }
Существует три семейства шрифтов по умолчанию, которые можно установить с помощью указанной выше утилиты. К ним относятся ' с засечками ', ' без ', и ' мононуклеоз ».
Давайте воспользуемся этими семействами шрифтов в демонстрации, используя команду « шрифт-{семейство шрифтов} », чтобы увидеть, как это работает:
< делитель сорт '=' ' шрифт с засечками округлый-xl тень-lg текстовый центр py-2 my-2 bg-green-100 ' >
Это семейство FONT-SERIF.
< / делитель >
< делитель сорт '=' «шрифт-без округленных-xl тень-lg текстовый центр py-2 my-2 bg-blue-100» >
Это семейство FONT-SANS.
< / делитель >
< делитель сорт '=' 'шрифт-моно округлый-xl тень-lg текстовый центр py-2 my-2 bg-red-100' >
Это семейство FONT-MONO.
< / делитель >
Объяснение приведенного выше кода следующее:
- Есть три элемента div, созданные с использованием « <дел> » и снабжены различными семействами шрифтов.
- « семейство шрифтов} Класс ” предоставит указанное семейство шрифтов для текста в элементе.
- « округлый-xl ” сделает углы элемента div круглыми.
- « тень-LG ” обеспечит большую тень для элемента div.
- « текстовый центр » выровняет текст по центру элемента.
- « ру-2 ' и ' мой-2 «занятия предоставят» 8 пикселей » отступы и поля в верхнем и нижнем направлении элемента.
- « bg-{цвет}-{число} Класс ” отвечает за установку фона элемента указанного цвета.
Из вывода ясно, что каждый элемент имеет свое семейство шрифтов:
Мы также можем динамически изменять семейство шрифтов элемента с помощью функции наведения. Для иллюстрации выполните приведенный ниже код:
< делитель сорт '=' 'my-2 округлый-xl bg-slate-100 py-2 текстовый центр шрифта-моно тень-LG hover: шрифт-засечки' >По умолчанию это семейство FONT-MONO< / делитель >В приведенном выше коде « наведите курсор: шрифт-{семейство} Утилита отвечает за изменение семейства шрифтов элемента при наведении на него курсора мыши. В выводе видно, что семейство шрифтов текста меняется, когда пользователь наводит на него курсор мыши:
Это все, что касается управления семейством шрифтов элемента в Tailwind.
Заключение
В Tailwind элементу можно назначить семейство шрифтов с помощью параметра « семейство шрифтов} ' сорт. Tailwind предоставляет три семейства шрифтов по умолчанию: « без ', ' с засечками ', и ' мононуклеоз ». Пользователь также может изменить семейство шрифтов элемента при изменении состояния элемента. В этой статье представлена процедура управления семейством шрифтов элемента в Tailwind.