Ten post ilustruje wszystkie możliwe aspekty dodania „podstawowych stylów” w CSS Tailwind.
Jak dodać „podstawowe” style w Tailwind?
„Tailwind CSS” zawiera następujące trzy metody dodawania „podstawowych” stylów w całej treści HTML lub w określonym elemencie:
- Użyj „CSS”, aby dodać style podstawowe w Tailwind.
- Użyj „Plugin”, aby dodać podstawowe style w Tailwind.
Przeanalizujmy je jeden po drugim.
Wymagania wstępne
Zanim przejdziemy do praktycznej implementacji, najpierw spójrz na nowo utworzony projekt o nazwie „Linuxhint”, który służy do dodawania „podstawowych stylów”:
Struktura pliku projektu
Teraz przejdź do pliku „index.html” i spójrz na jego kod HTML:
< HTML >< głowa >
< połączyć href = '/dist/output.css' rel = „arkusz stylów” >
< / głowa >
< ciało >
< h2 klasa = „podkreślenie tekstu w środku czcionki – pogrubiony tekst – różowy – 600” > Witamy w Linuxhint! < / h2 >< br >
< h3 klasa = „Czcionka w środku tekstu – pogrubiony tekst – pomarańczowy – 600” > Samouczek: Dodawanie stylów podstawowych w Tailwind. < / h3 >< br >
< / ciało >
W powyższych liniach kodu:
Wyjście
Wyjście powyższego kodu jest pokazane tutaj:
Teraz użyj omówionej metody, aby dostosować powyższy kod HTML, dodając podstawowe style. Zacznijmy od metody „CSS” Tailwind.
Metoda 1: Użyj CSS, aby dodać „style podstawowe” w Tailwind
Najprostszą i najłatwiejszą metodą dodania stylu bazowego do konkretnego elementu HTML jest dodanie ich w głównym pliku CSS projektu. Wykonajmy to zadanie praktycznie, postępując zgodnie z podanymi krokami.
Krok 1: Otwórz plik CSS
Najpierw otwórz główny plik CSS, tj. „ styl.css ”, który zawiera wbudowane tylne warstwy „podstawowe”, „komponenty” i „narzędzia”:
Krok 2: Dodaj CSS
Następnie dodaj styl „podstawowy” dla określonych elementów HTML „
” i „”, stosując klasy za pomocą „ @stosować ” w warstwie „podstawowej” za pomocą „ @warstwa słowo kluczowe. Słowa kluczowe „@layer” dodają zdefiniowane klasy do określonej warstwy „bazowej”: @podstawa warstwy {
h2 {
@zastosuj tekst-3xl;
}
h3 {
@zastosuj tekst-xl;
}
}
h2 {
@zastosuj tekst-3xl;
}
h3 {
@zastosuj tekst-xl;
}
}
W powyższych liniach kodu „ Rozmiar czcionki ” jest stosowana do elementów „
” i „” w celu powiększenia ich odpowiednio do określonego rozmiaru:
Zapisz (Ctrl + S) plik.
Krok 3: Wyjście
Teraz uruchom kod na serwerze na żywo i zobacz dane wyjściowe w następujący sposób:
Tutaj dane wyjściowe pokazują, że klasa Tailwind „Rozmiar czcionki” została pomyślnie zastosowana do określonego elementu w warstwie podstawowej.
Notatka : To samo podejście jest stosowane dla wszystkich innych klas CSS Tailwind.
Metoda 2: Użyj wtyczki, aby dodać „style podstawowe” w Tailwind
Inną przydatną metodą dodawania stylów „podstawowych” jest napisanie „ podłącz ” i użyj „ addBase() ” funkcja. Ta funkcja pomaga rejestrować nowe zajęcia w „ baza dyrektywa warstwowa. Ta funkcja jest używana w pliku Tailwind „tailwind.config.js”. Zróbmy to praktycznie.
Krok 1: Zdefiniuj funkcję „addBase()”.
Najpierw przejdź do „ tailwind.config.js ” i dodaj podstawowe style z wtyczki i wywołaj funkcję „addBase()”:
Zapisz plik.
Krok 2: Wyjście
Na koniec uruchom podany kod HTML i zobacz wynik:
Jak widać, klasa Tailwind „Font Size” zdefiniowana w funkcji „addBase()” jako obiekt JavaScript jest stosowana do określonych elementów HTML.
Wniosek
Podstawowe style Tailwind można łatwo dodawać za pomocą „ CSS ” w głównym pliku CSS i „ Podłącz ” z „ addBase() ” w pliku konfiguracyjnym. Metoda „CSS” jest uważana za najprostszą metodę, ponieważ definiuje tylko podstawowe style w warstwie „podstawowej” i automatycznie implementuje je na określonym elemencie. Z drugiej strony sekcja „wtyczka” w „ tailwind.config.js ” wymaga funkcji „addBase()” w celu zdefiniowania stylów podstawowych jako obiektów JavaScript. Ten post zilustrował wszystkie możliwe aspekty dodania podstawowych stylów w CSS Tailwind.