Тази статия ще илюстрира метода за стилизиране на заглавия чрез добавяне на основния стил в Tailwind.
Как да стилизирате заглавия с помощта на Base Style Tailwind?
За да стилизирате заглавия в Tailwind, вижте предоставените стъпки:
- Отворете CSS файла на проекта.
- В CSS файла добавете основния стил към заглавията, като използвате „ @слой ” директива по „ @база за заден вятър; ” директива.
- Направете HTML програма и използвайте заглавни елементи в нея.
- Стартирайте HTML програмата и проверете изхода.
Стъпка 1: Добавете основен стил към заглавията в CSS файла
Първо отворете „ style.css ” и добавете основния стил към заглавията в него с помощта на „ @слой ” директива. Например добавихме основния стил към следните заглавия:
@попътен вятър база ;
@слой база {
h1 {
@Приложи текст-6xl ;
}
h2 {
@Приложи текст-5xl ;
}
h3 {
@Приложи текст-4xl ;
}
h4 {
@Приложи текст-3xl ;
}
h5 {
@Приложи текст-2xl ;
}
}
@попътен вятър компоненти ;
@попътен вятър комунални услуги ;
Тук:
- “ @слой база { … } ” дефинира нов основен слой и съдържа стиловете за компонентите на заглавието.
- “ h1 { @приложи текст-6xl; } ” прилага „ текст-6xl ” полезен клас към „ h1 ” елементи.
- По същия начин, ' h2 ”, “ h3 ”, “ h4 ', и ' h5 ” размерите на шрифта на елементите са зададени чрез „ @Приложи ” и съответните класове на полезност (text-5xl, text-4xl, text-3xl и text-2xl).
Стъпка 2: Създайте HTML уеб страница с помощта на заглавия
След това направете HTML програмата и използвайте заглавните елементи в нея. Тук сме използвали следните елементи на заглавието:
< тяло >
< див клас = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Заглавие 1 < / h1 >
< h2 > Заглавие 2 < / h2 >
< h3 > Заглавие 3 < / h3 >
< h4 > Заглавие 4 < / h4 >
< h5 > Заглавие 5 < / h5 >
< / див >
< / тяло >
Стъпка 3: Стартирайте HTML програма
Накрая стартирайте HTML програмата и вижте уеб страницата за проверка:
Горният резултат показва заглавията, тъй като те са били стилове в CSS файла.
Заключение
За да стилизирате заглавия в Tailwind, отворете CSS файла и добавете основния стил към заглавията, като използвате „ @слой ” директива по „ @база за заден вятър; ” директива. След това направете HTML програма и използвайте заглавни елементи в нея. И накрая, вижте HTML уеб страницата, за да проверите резултата. Тази статия обяснява метода за стилизиране на заглавия чрез добавяне на основния стил в Tailwind.