Тази публикация илюстрира всички възможни аспекти за добавяне на „базови стилове“ в Tailwind CSS.
Как да добавите „базови“ стилове в Tailwind?
„Tailwind CSS“ се предлага със следните три метода за добавяне на „основните“ стилове в цялото HTML съдържание или в конкретен елемент:
- Използвайте „CSS“, за да добавите основни стилове в Tailwind.
- Използвайте „Plugin“, за да добавите основни стилове в Tailwind.
Нека ги изследваме един по един.
Предпоставки
Преди да преминете към практическата реализация, първо разгледайте новосъздадения проект, наречен „Linuxhint“, който се използва за добавяне на „базови стилове“:
Файлова структура на проекта
Сега отворете файла „index.html“ и вижте неговия HTML код:
< html >< глава >
< връзка href = '/dist/output.css' отн = 'стилов лист' >
< / глава >
< тяло >
< h2 клас = 'подчертан текст-център шрифт-удебелен текст-розово-600' > Добре дошли в Linuxhint! < / h2 >< бр >
< h3 клас = 'text-center font-bold text–orange-600' > Урок: Добавяне на базови стилове в Tailwind. < / h3 >< бр >
< / тяло >
В горните кодови редове:
Изход
Резултатът от горния код е показан тук:
Сега използвайте обсъждания метод, за да персонализирате горния HTML код, като добавите основните стилове. Нека започнем с метода „CSS“ на Tailwind.
Метод 1: Използвайте CSS, за да добавите „базови стилове“ в Tailwind
Най-простият и лесен метод за добавяне на основен стил към конкретния HTML елемент е да ги добавите в основния CSS файл на проекта. Нека изпълним тази задача практически, като следваме дадените стъпки.
Стъпка 1: Отворете CSS файла
Първо отворете основния CSS файл, т.е. „ style.css ”, който съдържа вградените слоеве „база”, „компоненти” и „помощни програми” за попътен вятър:
Стъпка 2: Добавете CSS
След това добавете „основния“ стил за конкретните „
“ и „“ HTML елементи, като приложите класовете с помощта на „ @Приложи ” в слоя „основа” с помощта на „ @слой ” ключова дума. Ключовите думи „@layer“ добавят дефинираните класове на посочения „базов“ слой: @слойна основа {
h2 {
@приложи текст-3xl;
}
h3 {
@приложи текст-xl;
}
}
h2 {
@приложи текст-3xl;
}
h3 {
@приложи текст-xl;
}
}
В горните кодови редове, „ Размер на шрифта ” класът се прилага към елементите „
” и „”, за да ги увеличи съответно до определения размер:
Запазете (Ctrl + S) файла.
Стъпка 3: Резултат
Сега стартирайте кода в живия сървър и вижте изхода, както следва:
Тук изходът показва, че класът „Размер на шрифта“ на Tailwind е успешно приложен към посочения елемент в основния слой.
Забележка : Същият подход се използва за всички останали CSS класове на Tailwind.
Метод 2: Използвайте приставката, за да добавите „базови стилове“ в Tailwind
Друг полезен метод за добавяне на „основни“ стилове е да напишете „ плъгин ” и използвайте „ addBase() ” функция. Тази функция помага да се регистрират нови класове в „ база ” директива за слой. Тази функция се използва във файла „tailwind.config.js“ на Tailwind. Нека го направим практически.
Стъпка 1: Дефинирайте функцията „addBase()“.
Първо отворете „ tailwind.config.js ” конфигурационен файл и добавете базовите стилове от плъгина и извикайте функцията „addBase()”:
Запазете файла.
Стъпка 2: Изход
И накрая, стартирайте дадения HTML код и вижте резултата:
Както се вижда, класът „Размер на шрифта“ на Tailwind, дефиниран във функцията „addBase()“ като JavaScript обект, се прилага към посочените HTML елементи.
Заключение
Основните стилове на задния вятър могат да се добавят лесно с помощта на „ CSS ” в главния CSS файл и „ Плъгин ” с „ addBase() ” в конфигурационния файл. Методът „CSS“ се счита за най-простият метод, тъй като дефинира само базовите стилове в слоя „основа“ и автоматично ги внедрява върху посочения елемент. От друга страна, секцията „плъгин“ на „ tailwind.config.js ” изисква функцията „addBase()”, за да дефинира базовите стилове като JavaScript обекти. Тази публикация илюстрира всички възможни аспекти за добавяне на базови стилове в Tailwind CSS.