Tailwind CSS: Używanie własnych wartości w klasach TailwindCSS

0:00Przejdźmy sobie teraz do naszego pliku i z powrotem do naszej strony. No i skopiujemy

0:03sobie tutaj, żeby było troszeczkę szybciej

0:06na chwilę obecną. Zobacz, że mamy już jeden element zrobiony tak jak powinien być.

0:09Dlatego sobie zrobię kopiuj, wklej i podmieniamy tutaj wartości.

0:13Na pewno zamiast pinezki będziemy potrzebowali naszej ikonki czatu.

0:17I zamiast tego napisu potrzebujemy czat.

0:20Na razie nie wyświetla to nam się tak jak powinno. Sprawdźmy teraz

0:24dlaczego tak jest? To mamy flex, a flex column

0:27oczywiście zrobiliśmy literówkę.

0:28Twórcy Tailwinda generalnie ułatwiają nam pracę i nie musimy pisać całe flex column tylko po

0:33prostu flex col skrót i mamy nadawaną Direction Column.

0:36Dzięki temu już elementy powinny ustawić się pod sobą.

0:39No i teraz potrzebujemy tutaj dodatkowego elementu pod tym spanem, który będzie

0:44oczywiście div, który będzie naszą liczbą powiadomień.

0:48Na chwilę obecną jak się przeniesiemy na stronę to mamy tych powiadomień

0:53trzy sztuki, dlatego możemy sobie tutaj wpisać 3 jako zawartość.

0:56Widzisz, na razie nie mamy tego przesuniętego.

0:58Natomiast teraz zajmiemy się właśnie stylowaniem tego elementu, żeby wyglądał tak jak to

1:02mamy tutaj w tej liście, czyli żeby miał obramowanie, żeby miał taką wielkość.

1:06Przejdźmy sobie do naszego pliku, no i nadajemy mu klasy.

1:09Zaczniemy od paddingu na Y wielkości 1, paddingu na x wielkości 1,5.

1:15Potrzebujemy margin po lewej stronie auto,

1:18żeby odsunąć ten element tutaj maksymalnie od tego napisu w prawą stronę.

1:22Jak sobie już zapiszę to już widzisz, że

1:24element odsunął się w prawą stronę maksymalnie na listę.

1:27Natomiast brakuje nam tutaj jeszcze

1:28obramowania i tła tego elementu, żeby było stałe.

1:31Dlatego przejdźmy do naszego elementu i nadajmy mu kolejne style.

1:35Font zrobimy sobie semi-bold. Dodatkowo zaokrąglimy. Tailwind przychodzi nam tutaj z

1:41utility classes rounded, co pozwala nam wprowadzić jakby radius, border radius na 4.

1:47Oczywiście jeszcze nasz border nie ma żadnego koloru.

1:50Tutaj tylko powiedzieliśmy o radius'ie jaki

1:52ma być, dlatego teraz nadamy sobie kolor i niech to będzie 400.

1:57Jak sobie to już zapiszę to już mamy

1:58border, który pojawił się na naszym elemencie.

2:01No jeszcze za duża jest tutaj ta linia, dlatego skorzystamy sobie z kolejnej

2:04utility classes dostarczanej nam przez Tailwind'a, mianowicie leading.

2:08I tutaj wprowadzimy sobie wartość, którą sami chcemy określić.

2:12Warto tutaj wspomnieć, jeżeli chcesz

2:14podejrzeć jakąś klasę, nie wiesz co ona znaczy, to bardzo łatwo,

2:17jeżeli przejdziesz sobie na stronę

2:18dokumentacji tutaj i control+K, wpisz sobie leading, line height.

2:23I w tym momencie możemy określić jako normal, relaxed i loose.

2:28I to wszystko, jeżeli przejdziemy do naszej klasy i

2:32wpiszemy sobie normal albo relax, no to Tailwind nadaje leading 1,62.

2:37No i w tym momencie jak sobie zapiszę

2:39ten plik, no to jakby ta linia jest dużo wyższa niż powinna być.

2:44Natomiast w naszym przypadku zostawimy

2:46sobie 11 pikseli i potrzebujemy jeszcze kilku wartości.

2:49Tutaj na pewno nie podobają mi się te paddingi, dlatego musimy coś tutaj zmienić.

2:53Przejdźmy sobie bg-stone na 800, żeby miało takie same tło zawsze,

2:58za każdym razem, bo później dojdą nam style na hover.

3:00A zauważ, że na tej liście tutaj jak sobie

3:02robimy hover to background tutaj pozostaje cały czas taki sam.

3:05On się w ogóle nie zmienia, znikają tylko

3:08obramowania tego o czym się za chwilkę zajmiemy.

3:11Natomiast wróćmy teraz do naszej strony.

3:12Jeszcze ten napis jest zdecydowanie za duży, dlatego musimy zmienić

3:17wartość, wielkość tekstu i Tailwind też tutaj przychodzi z pomocą.

3:21Możesz korzystać z wartości text-lg

3:23co zostanie nadane od razu 1,25 rema.

3:27Natomiast my tutaj skorzystamy sobie, jako że nie ma jedenastu pikseli w standardzie,

3:31bo wartości są dzielone przez 4, my sobie wpiszemy 11 pikseli.

3:36Dzięki temu ta cyferka stanie się troszeczkę mniejsza.

3:39Już wygląda to bardziej tak jak w tym przypadku.

3:41No i tak naprawdę pierwszy wygląd mamy już zrobiony.

3:44Teraz zajmiemy się stylami na on hover i

3:47tym w jaki sposób możemy do tego podejść i jak pomaga nam w tym Tailwind CSS.