Tailwind CSS: Co to jest TailwindCSS?

0:00Jak już wiesz ze wstępu, Tailwind CSS to

0:02framework wydany po raz pierwszy w maju 2019 roku, obecnie w wersji 3,6.

0:08Od czasu premiery uzyskał sporą rzeszę

0:10fanów na całym świecie i według twórców jest to narzędzie, które nie skupia się na

0:14funkcjonalności stylu danego elementu, ale na samym sposobie jego wyświetlenia.

0:19I to jest właśnie cała esencja podejścia utility first do stylowania.

0:22Tailwind dostarcza nam zestaw

0:25gotowych do użycia klas, które znacznie przyspieszają naszą pracę.

0:29Dlaczego tak się dzieje?

0:30Otóż Adam Wathan i Steve Schoger tworząc to narzędzie dla siebie

0:35przechodzili przez różne problemy związane z pisaniem właśnie styli.

0:38Wielokrotnie powtarzane selektory z tą

0:40samą logiką zamieniali po drodze na zestawy tzw.

0:43utility classes, które mogli potem sobie re-używać. I zauważyli, że to znacznie

0:49przyspiesza ich pracę, bo nie muszą pisać kolejny raz logiki, którą już wcześniej

0:53używali w innym elemencie interfejsu użytkownika.

0:56Tailwind CSS daje nam zestaw klas, które i

0:59tak kiedyś musielibyśmy sami zaimplementować w arkuszach styli CSS.

1:03To co wyróżnia ten framework od innych tego typu rozwiązań to to, że Ty jako

1:08developer masz pełną dowolność jeżeli chodzi o stylizację elementu na stronie.

1:12Tailwind nie narzuca na Ciebie żadnego konkretnego motywu.

1:16Poniżej masz przykład jednego z popularnych rozwiązań do stylowania,

1:20mianowicie biblioteki Bootstrap stworzonej przez twórców Twittera.

1:24Zauważ, że czerwony przycisk Bootstrapa

1:27uzyskasz po prostu dodając klasy btn, btn danger.

1:32Żeby ten sam efekt uzyskać przy pomocy

1:34Tailwinda, będziemy musieli napisać coś takiego.

1:37I jeżeli chcesz mi teraz zostawić przerażony tym dlaczego ten sam efekt

1:41uzyskamy pisząc 6 razy więcej znaków, to proszę Cię zostań jeszcze chwilkę.

1:45Pokażę Ci zalety i wady takiego podejścia.

1:48Pierwszym zarzutem, który pewnie rzucił Ci się w oczy jest liniowe dodawanie styli w

1:52aplikacji, w plikach i aplikacjach w HTML u.

1:55Sprawia to, że cały plik jest mało czytelny.

1:58Jest to zarzut jak najbardziej uzasadniony.

2:00Na poprzednim przykładzie z bootstrapowym buttonem widzieliśmy to dobitnie.

2:04Pokażę Ci w tym kursie jak możesz poradzić sobie z problemem czytelności Twojego kodu

2:08za pomocą różnych dostępnych narzędzi i wtyczek do edytorów kodu.

2:12I kolejną niewątpliwą wadą są słabe

2:14możliwości porzucenia tego podejścia w projekcie.

2:17Otóż jeżeli zaczniesz używać Tailwinda,

2:20bardzo ciężko będzie Ci przejść na coś innego w obrębie jednego projektu.

2:25Nie mówimy tutaj o całkowicie nowym projekcie, gdzie jesteś na początku

2:29i tak naprawdę swobodnie dobierasz swoje rozwiązania do stylowania.

2:32Dodatkowo jeżeli chodzi o wady, żeby używać Tailwind CSS musisz się go nauczyć.

2:37To sprawia, że sama znajomość CSS'a już nie wystarcza.

2:40Instalowanie tego rozwiązania w swoim

2:42projekcie też wymaga podjęcia kilku kroków.

2:44Niestety, ale jest to kolejna abstrakcja, z której trzeba nauczyć się korzystać.

2:49Ale może to i dobrze, bo mamy dzięki temu okazję odbyć tę podróż dzisiaj razem.

2:53Dobrze, dosyć tych wad. Teraz porozmawiajmy o zaletach, a tych

2:56jest wiele i niektóre z nich wyrównują wady, o których wcześniej wspomniałem.

3:01Niewątpliwą zaletą Tailwinda jest łatwość jego nauki

3:04i łatwe zrozumienie nawet dla początkujących.

3:06Jasna i przejrzysta dokumentacja ułatwia nam codzienną pracę i szczególnie

3:11na początku Twojej drogi radzę Ci, żebyś miał/miała ją otwartą gdzieś na boku.

3:16Tailwind CSS zabiera z naszych barków problem

3:19odpowiedniego nazewnictwa klas, a wbrew pozorom nazywanie rzeczy zajmuje bardzo

3:23dużo czasu i blokuje nasze zasoby intelektualne, które moglibyśmy tak

3:28naprawdę przeznaczyć na coś bardziej produktywnego, prawda?

3:31Szczególnie w sytuacji, kiedy trzeba uważać na kaskadowość CSS'owych styli.

3:35Jeżeli miałeś/miałaś okazję pisać jakiś większy projekt za pomocą tradycyjnego

3:39podejścia do stylowania, wiesz zapewne jak trudne może okazać się

3:43utrzymanie rozrastających się plików ze stylami.

3:46I za tą poprzednią zaletą idą jeszcze dwie inne.

3:49Twój kod CSS nie rozrasta się wraz z

3:51rozrastaniem się Twojego projektu dzięki mechanizmowi czyszczenia styli.

3:55Na koniec wszystko co nie zostanie przez

3:58Ciebie użyte w projekcie nie wyląduje w wersji produkcyjnej.

4:01I ostatnia zaleta jaka mi przychodzi do głowy to łatwość refaktoringu styli CSS.

4:06Masz praktycznie dwa pliki, które są dla Ciebie źródłem prawdy.

4:10Global CSS i Tailwind config JS, dzięki

4:13czemu łatwo wprowadzać jakieś globalne zmiany w Twoich stylach, w Twoim projekcie.

4:17No dobrze, teraz kiedy już znasz wady i

4:19zalety tego frameworka, czas zacząć zanurzać się bardziej w tym świecie.

4:23Zobaczymy jak w praktyce wygląda pisanie styli przy pomocy Tailwind CSS.