Tailwind CSS to dobrze znany framework, który służy do tworzenia dostosowywalnych i responsywnych stron internetowych lub projektów. Pozwala także użytkownikom kontrolować układ i odstępy między elementami bez pisania niestandardowego CSS. Wypełnienie to przestrzeń między zawartością danego elementu a jego obramowaniem. Czasami użytkownicy chcą zastosować taką samą ilość wypełnienia z każdej strony elementu. Tailwind zapewnia klasy narzędzi do stosowania dopełnienia do wszystkich boków elementu lub do określonych boków, takich jak górny, prawy, dolny lub lewy.
W tym artykule zilustrujemy metodę dodawania dopełnienia ze wszystkich stron elementu w Tailwind.
Jak dodać wyściółkę ze wszystkich stron w Tailwind?
Aby dodać dopełnienie ze wszystkich stron określonego elementu w Tailwind, utwórz strukturę HTML. Następnie użyj klasy użyteczności „p-
Składnia
< element klasa = 'p-
Zastąp „
Przykład
W tym przykładzie mamy dwa „
< ciało >
< dz klasa = 'bg-pink-600 p-8 w-max' >
Wyściółka W CSS wiatru w tył
dz >
< br >
< dz klasa = 'bg-turkusowy-600 p-14 w-max' >
Wyściółka W CSS wiatru w tył
dz >
ciało >
Tutaj, w pierwszym
-
- “ bg-różowy-600 ” ustawia różowy kolor tła elementu .
- “ p-8 ” dodaje 8 jednostek wypełnienia ze wszystkich stron kontenera.
- “ w-maks ” class ustawia szerokość elementu
na maksymalną szerokość zawartości.W drugim
:-
- “ bg-turkusowy-600 ” class ustawia kolor turkusowy dla tła elementu .
- “ p-14 ” dotyczy 14 jednostek wyściółki na wszystkie strony kontenera.
- “ w-maks ” class ustawia szerokość elementu
na maksymalną szerokość zawartości.Wyjście
Zgodnie z powyższym wynikiem określone wypełnienie zostało zastosowane na wszystkich bokach obu pojemników.Wniosek
Aby dodać dopełnienie ze wszystkich stron elementu w Tailwind, w programie HTML używana jest klasa narzędziowa „p-
” z żądanym elementem. Użytkownicy muszą określić konkretną wartość, aby zastosować dopełnienie do elementu. W celu weryfikacji sprawdź stronę internetową HTML i upewnij się, że zostały wprowadzone zmiany. W tym artykule zilustrowano metodę dodawania dopełnienia ze wszystkich stron elementu w Tailwind.
- “ bg-turkusowy-600 ” class ustawia kolor turkusowy dla tła elementu
- “ bg-różowy-600 ” ustawia różowy kolor tła elementu