Ten artykuł wyjaśni:
- Do czego służą ekrany, kolory i odstępy w motywie Tailwind?
- Jak używać ekranów, kolorów i odstępów w motywie Tailwind?
- Jak skonfigurować ekrany, kolory i odstępy w motywie Tailwind?
Do czego służą ekrany, kolory i odstępy w motywie Tailwind?
The ekrany key umożliwia użytkownikom modyfikowanie responsywnych punktów przerwania w projekcie Tailwind. Punkty przerwania to punkty, w których układ zmienia się w zależności od szerokości ekranu. Domyślnie Tailwind zawiera pięć ekranów, tj. sm (mały), md (średni), lg (duży) i xl (bardzo duży). Jednak użytkownicy mogą zdefiniować swoje punkty przerwania za pomocą klawisza „screens”, a następnie użyć ich w programie HTML.
Zabarwienie służy do modyfikowania palety kolorów. Kolory to jedna z najważniejszych cech designu. Motyw Tailwind zapewnia domyślną paletę kolorów z szeroką gamą odcieni, ale użytkownicy mogą ją również dostosować lub rozszerzyć o własne kolory. Użytkownicy mogą definiować kolory za pomocą klucza „colors”, a następnie używać ich z dowolną klasą narzędziową związaną z kolorami w kodzie HTML.
The rozstaw służy do modyfikowania odstępów i skali rozmiaru. Odstępy to kolejny istotny aspekt projektowania, ponieważ wpływają na czytelność, wyrównanie i równowagę elementów. Motyw Tailwind zapewnia spójną skalę odstępów opartą na podstawowej wartości 4 pikseli (0,25 rem). Można go jednak również dostosować lub rozszerzyć o niestandardowe wartości. Użytkownicy mogą definiować wartości odstępów za pomocą klawisza „spacing”, a następnie używać ich z dowolną klasą narzędziową związaną z odstępami w pliku programu.
Jak używać ekranów, kolorów i odstępów w motywie Tailwind?
Aby używać ekranów, kolorów i odstępów w motywie Tailwind, utwórz program HTML i użyj domyślnych właściwości ekranu, kolorów i odstępów zgodnie z wymaganiami. Następnie uruchom program HTML i wyświetl stronę internetową HTML. Wykonajmy poniższe kroki:
Krok 1: Utwórz stronę WWW w formacie HTML
Najpierw utwórz program HTML i użyj domyślnych właściwości ekranu, kolorów i odstępów:
= „text-3xl m-5 sm:text-white text-center” >
Wskazówka dotycząca Linuksa!
>
= „text-2xl m-5 md:text-white text-center” >
Witamy w tym samouczku
>
= „text-2xl m-5 lg:text-white text-center” >
CSS wiatru w tył
>
Witamy w tym samouczku
>
= „text-2xl m-5 lg:text-white text-center” >
CSS wiatru w tył
>
= „text-2xl m-5 xl:text-white text-center” >
Motywy
>
>
>
Tutaj:
- “ -p-10 ' I ' m-5 ” to właściwość odstępu.
- “ sm ”, „ md ”, „ lg ', I ' xl ” to właściwości ekranu.
- “ czerwony-700 ”, „ niebieski-600 ”, „ zielony-500 ”, „ różowy-700 ', I ' biały ” to właściwości koloru.
Krok 2: Uruchom program HTML
Następnie uruchom program HTML, aby wyświetlić stronę internetową HTML:
Na powyższym wyjściu można zobaczyć domyślne ekrany, kolory i właściwości odstępów.
Jak skonfigurować ekrany, kolory i odstępy w motywie Tailwind?
Aby skonfigurować ekrany, kolory i odstępy w motywie Tailwind, spójrz na podane kroki:
- Otworzyć ' tailwind.config.js ' plik.
- Przejdź do „ temat ” i dostosuj ekrany, kolory i właściwości odstępów zgodnie z wymaganiami.
- Użyj dostosowanych właściwości w programie HTML.
- Wyświetl stronę HTML w celu weryfikacji.
Krok 1: Skonfiguruj ekrany, kolory i odstępy w pliku konfiguracyjnym Tailwind
W ' temat ”sekcja” tailwind.config.js ”, dostosuj ekrany, kolory i właściwości odstępów zgodnie z potrzebami. Na przykład dostosowaliśmy te właściwości w następujący sposób:
moduł .eksport = {treść : [ './indeks.html' ] ,
temat : {
//dostosowywanie ekranów
ekrany : {
sm : „480 pikseli” ,
md : „668 pikseli” ,
lg : „876px” ,
xl : „1100 pikseli” ,
} ,
//dostosowywanie kolorów
zabarwienie : {
biały : #ffffff ,
czarny : „#000000” ,
niebieski : „#08609c” ,
zielony : '#089c28' ,
czerwony : „#9c0306” ,
żółty : '#ede60e' ,
różowy : '#ed0e55' ,
} ,
//dostosowywanie odstępów
rozstaw : {
piks : „1 piksel” ,
„0” : „0” ,
„1” : „0,25 rem” ,
„2” : „0,5 rem” ,
„3” : „0,75rem” ,
„4” : „1 rzecz” ,
„5” : „1,25 rema” ,
„6” : „1,5 remu” ,
„8” : '2rem' ,
„10” : „2,5 rem” ,
„12” : '3rem' ,
„16” : '4rem' ,
'20' : „5 rem” ,
}
} ,
} ;
W tym kodzie:
- „ ekrany ” definiuje punkty przerwania ekranu dla różnych rozmiarów. Zapewnia aliasy (takie jak sm, md, lg, xl) i ich równoważne wartości.
- „ zabarwienie ” definiuje niestandardowe kolory za pomocą ich nazw i par wartości szesnastkowych.
- „ rozstaw ” określa niestandardowe wartości odstępów dla wielu rozmiarów. Używa aliasów (takich jak px, 0, 1, 2 itd.) do reprezentowania określonych wartości odstępów w jednostkach „rem”.
Krok 2: Użyj skonfigurowanych właściwości w programie HTML
Teraz wykorzystaj dostosowane właściwości w programie HTML:
= „text-3xl m-5 sm:text-white text-center” >
Wskazówka dotycząca Linuksa!
>
= „text-2xl m-5 md:text-white text-center” >
Witamy w tym samouczku
>
= „text-2xl m-5 lg:text-white text-center” >
CSS wiatru w tył
>
Witamy w tym samouczku
>
= „text-2xl m-5 lg:text-white text-center” >
CSS wiatru w tył
>
= „text-2xl m-5 xl:text-white text-center” >
Motywy
>
>
>
Krok 3: Wyświetl stronę internetową w formacie HTML
Na koniec sprawdź dane wyjściowe, przeglądając stronę internetową HTML:
Można zauważyć, że zawartość strony internetowej zmienia się w zależności od skonfigurowanych ekranów, kolorów i właściwości odstępów.
Wniosek
The ekrany key pozwala użytkownikom dostosowywać/modyfikować responsywne punkty przerwania, zabarwienie służy do dostosowywania palety kolorów dla projektu i rozstaw służy do dostosowywania odstępów i skali rozmiaru. Ponadto użytkownicy mogą dostosować te klucze lub właściwości do swoich potrzeb. W tym artykule wyjaśniono ekrany, kolory i odstępy w motywie Tailwind.