В этой статье будет показан метод стилизации заголовков путем добавления базового стиля в Tailwind.
Как стилизовать заголовки, используя базовый стиль Tailwind?
Чтобы стилизовать заголовки в Tailwind, выполните указанные шаги:
- Откройте файл CSS проекта.
- В файле CSS добавьте базовый стиль к заголовкам, используя « @слой » директива в соответствии с « база @tailwind; директива.
- Создайте HTML-программу и используйте в ней элементы заголовков.
- Запустите программу HTML и проверьте вывод.
Шаг 1. Добавьте базовый стиль к заголовкам в файле CSS.
Сначала откройте « стиль.css » и добавьте к заголовкам в нем базовый стиль с помощью « @слой директива. Например, мы добавили базовый стиль к следующим заголовкам:
@tailwind база ;
@слой база {
h1 {
@применять текст-6xl ;
}
h2 {
@применять текст-5xl ;
}
h3 {
@применять текст-4xl ;
}
h4 {
@применять текст-3xl ;
}
h5 {
@применять текст-2xl ;
}
}
@tailwind компоненты ;
@tailwind утилиты ;
Здесь:
- “ @layer base { … } ” определяет новый базовый слой и содержит стили для компонентов заголовка.
- “ h1 { @apply text-6xl; } » применяется « текст-6xl » служебный класс к « h1 элементы.
- Сходным образом, ' h2 », « h3 », « h4 ', и ' h5 » элементы имеют размер шрифта, установленный с помощью « @применять ” и соответствующие служебные классы (text-5xl, text-4xl, text-3xl и text-2xl).
Шаг 2: Создайте веб-страницу HTML, используя заголовки
Затем создайте HTML-программу и используйте в ней элементы заголовков. Здесь мы использовали следующие элементы заголовка:
< тело >
< див сорт '=' 'ч-экран выравнивания-центр текста-центр bg-фиолетовый-400' >
< h1 > Заголовок 1 < / h1 >
< h2 > Заголовок 2 < / h2 >
< h3 > Заголовок 3 < / h3 >
< h4 > Заголовок 4 < / h4 >
< h5 > Заголовок 5 < / h5 >
< / див >
< / тело >
Шаг 3: Запустите HTML-программу
Наконец, запустите программу HTML и просмотрите веб-страницу для проверки:
В приведенном выше выводе заголовки отображаются в виде стилей в файле CSS.
Заключение
Чтобы стилизовать заголовки в Tailwind, откройте файл CSS и добавьте базовый стиль к заголовкам, используя « @слой » директива в соответствии с « база @tailwind; директива. Затем создайте HTML-программу и используйте в ней элементы заголовков. Наконец, просмотрите веб-страницу HTML, чтобы проверить вывод. В этой статье объясняется метод стилизации заголовков путем добавления базового стиля в Tailwind.