Tailwind CSS: Stylowanie pierwszego elementu listy

0:00Przejdźmy sobie na dół i potrzebujemy

0:02kolejnego wrappera, który będzie ustawiał nam nasze elementy listy tutaj.

0:06Dlatego zrobiłem sobie div,

0:07klasa Flex, flex-column.

0:10Dlaczego column?

0:11Bo wszystkie te elementy,

0:12jeżeli zwrócić tutaj uwagę na tej stronie,

0:15one są ustawione tutaj w kolumnie, czyli jest jeden pod drugim.

0:19Dlatego też my sobie ustawimy flex-column.

0:21Zrobimy sobie zmianę koloru tekstu na text-gray-300.

0:25No i tutaj teraz możemy sobie wrzucać

0:27poszczególne elementy naszej listy, którą widzimy tutaj.

0:30Pierwszy element to jest taka pinezka i zacznij tutaj FAQ.

0:33Zaczniemy od pierwszego elementu w tej liście.

0:36Zrobimy sobie div, żeby to wszystko

0:39złapać jednym wrapperem. Tutaj potrzebujemy dwa spany.

0:42W pierwszym spanie będzie nasza emotikonka, która jest pinezką, a w drugim spanie

0:47będziemy potrzebowali. Zacznij tutaj + FAQ. Zapiszemy sobie to.

0:51No na razie nie wygląda to tak jak powinno.

0:54Musimy to odpowiednio odsunąć od lewej

0:56krawędzi i tutaj wszystko fajnie wyśrodkować.

0:59Dlatego przejdźmy sobie teraz do naszego elementu i przejdźmy sobie do naszego wrappera,

1:03na którego nadamy odpowiednie utility classes Tailwind'a,

1:05dzięki czemu pozwoli nam to

1:07przesunąć tutaj w lewą stronę, czyli na pewno musimy przesunąć pl-11

1:12w tym przypadku. Widzisz jak łatwo jest iterować pomiędzy elementami.

1:15Używać tych utility classes. Padding left 11 w tym momencie, 44 pixele. Co potrzebujemy

1:20tutaj dalej to padding z prawej strony potrzebujemy jeszcze, padding y 1,5, żeby

1:26troszeczkę odsunąć od siebie te dwa elementy.

1:28Dodatkowo potrzebujemy flex-items-center

1:31standardowo, żeby fajnie wyśrodkować to wszystko. Style na hover,

1:36tymi stylami na hover na razie się nie będziemy zajmować.

1:39Natomiast możemy sobie zmienić kursor, bo

1:41jak widzisz tutaj ten kursor jest taki jak byśmy mogli coś wpisać.

1:44Jeżeli sobie przejdziemy na orginalną stronę to ten kursor jest taką łapką.

1:47Tailwind też dostarcza, czyli kursor pointer.

1:51Zobacz, że aplikowany jest po prostu właściwość CSS'owa cursor pointer.

1:55Zapiszemy to sobie. I teraz jak najadę moją myszką

1:57tutaj to już mamy kursor, który wskazuje na to, że możemy sobie to kliknąć.

2:01Oczywiście style jeszcze nie są za bardzo zrobione, dlatego teraz przejdziemy sobie do

2:05stylowania tej pinezki, odsunięcia, odpowiedniego i ustalenia jej wysokości.

2:11Tutaj potrzebujemy class.

2:12W tym momencie wpiszemy sobie flex też, żeby było łatwiej nam pracować na tych

2:16elementach. Flex-Items-Center będziemy potrzebować. Width 5, height też 5.

2:21Zapiszemy to sobie. Troszeczkę odsunęło nam się właśnie już od tego napisu.

2:24Myślę, że to wystarczy na pinezkę.

2:26Natomiast teraz jeszcze możemy sobie ostylować tutaj nasz tekst.

2:29Na pewno przyda się ten margin po lewej stronie.

2:33Zróbmy dwa. Odsuniemy troszeczkę ten napis. Widzisz odsunął się od pinezki.

2:37Potrzebujemy nadać szerokość, żeby

2:39rozszerzyć ten napis na całą szerokość tego menu.

2:43Dlaczego?

2:43Później, jeżeli dojdą te dodatkowe elementy, które mówią nam właśnie o ilości

2:48powiadomień na tej stronie, chcemy, żeby one były odsunięte na prawą stronę.

2:52Dlatego też musimy sobie zwiększyć ten element, nadać mu width totalny tej listy.

2:57Przejdźmy sobie tutaj. Dlatego

2:58zróbmy teraz max width full.

3:00To oznacza, że element po prostu ma mieć

3:03max width 100%, czyli całego rodzica. I jeszcze będziemy potrzebowali tutaj text-sm.

3:08No już ta lista wygląda dużo bardziej jak to co mamy tutaj na stronie.

3:13Teraz stworzymy sobie kolejny element na tej liście, czyli już element czatu

3:18właśnie z tym wskaźnikiem powiadomień po prawej stronie.