Narzędzia JavaScript Full-Stack Web Developera: Tailwind i Tailwind UI

0:00Przez lata narzędzia takie

0:01jak Bootstrap, Foundation czy potem Bulma,

0:04pomagały nam w pisaniu kodu CSS w oparciu o komponenty.

0:08Potem pojawił się Tailwind CSS, który

0:10początkowo zderzał się z dużą falą krytyki

0:13ze względu na to, że reprezentował coś, co przypominało w dużym stopniu

0:17pisanie inline'owego kodu CSS

0:19a dodatkowo wydawało się, że Tailwind też powoduje znaczący przyrost objętości kodu

0:24HTML i też trudność w jego późniejszym zarządzaniu i też

0:28zarządzaniu z danymi stylami ze względu na

0:30to, że jeżeli chcemy coś zmodyfikować to musimy modyfikować również kod

0:35HTML. W praktyce jednak jest już troszkę

0:37inaczej, ponieważ aktualnie Tailwind CSS jest niekwestionowanym liderem

0:41jeżeli chodzi o narzędzia do

0:43pisania kodu CSS oraz generalnie tworzenia interfejsów.

0:47Jego ekosystem i tak samo community niesamowicie rozwinęło się

0:51na przestrzeni dwóch ostatnich lat i z tego

0:53powodu w moim przypadku jest jedynym

0:55narzędziem, które wykorzystuję do budowy

0:58interfejsów i też gorąco go polecam. Pomimo tego, że

1:01sam Tailwind CSS jest bezpłatny, tak jednocześnie

1:04mamy tutaj do dyspozycji jego płatną wersję o nazwie Tailwind UI

1:08w przypadku której mamy do

1:09dyspozycji szereg gotowych komponentów,

1:12które możemy po prostu skopiować i wkleić do swojego projektu.

1:15Co więcej, ich konfiguracja w zasadzie

1:18tak jak powiedziałem, sprowadza się do tego, aby po prostu je wkleić

1:21i ewentualnie je wkleić w naszym projekcie.

1:24Oczywiście w niektórych

1:25sytuacjach konieczne jest np. doinstalowanie

1:27jakiegoś dodatkowego pluginu i coś takiego

1:30dzieje się chociażby w przypadku formularzy, gdzie rzeczywiście w momencie

1:34gdy wyświetlamy tutaj kod tego komponentu, to okazuje się, że musimy

1:37tutaj doinstalować sobie dodatkowy plugin.

1:40Jednocześnie też w niektórych

1:42sytuacjach konieczne jest dopisanie

1:44kawałka kodu JavaScript,

1:45który zajmie się obsługą samej logiki, tak

1:48jak w tym przypadku komponentu typu SELECT.

1:50Myślę, że jest to jak najbardziej

1:52oczywiste i zrozumiałe, tym

1:53bardziej, że mamy tutaj przykładowy kod dla

1:55Vue, React i

1:57też od siebie mogę dodać, że praktycznie nie ma żadnego

1:59problemu aby wykorzystać te komponenty również

2:02w Svelte.js. Z jednej strony

2:03prawdopodobnie korzystasz już

2:05z Tailwind CSS, ale jeżeli nie

2:07to chciałbym tylko przeprowadzić się krótko przez proces

2:10instalacyjny

2:11również w połączeniu z Vite.

2:12Mianowicie tutaj dokumentacja jest

2:14wręcz genialna, ponieważ jak widzisz chodzi tutaj przede

2:17wszystkim o zainicjalizowanie projektu i tylko nadamy mu tutaj nazwę my-vite. Następnie

2:22wybierzemy sobie Vue.js

2:23i tym razem i nie będziemy korzystać

2:25z TypeScriptu aczkolwiek myślę, że do

2:27samego TypeScriptu będziemy sobie jeszcze tutaj wracać.

2:30W każdym razie instaluję teraz zależności

2:32i w zasadzie mogę wrócić

2:34do dokumentacji.

2:35Tutaj kolejne elementy, które musimy zainstalować to oczywiście sam TailwindCSS,

2:40PostCSS, ponieważ Tailwind wykorzystuję go do

2:42transformacji CSS, no i tak samo autoprefixer,

2:45który zasadniczo również dba

2:46o to, aby nasz wygenerowany CSS był jak najbardziej poprawny. No to instalujemy te

2:51zależności i możemy tutaj wrócić po to, aby skopiować

2:54polecenie, które zainicjalizuje nam Tailwind CSS.

2:58Wtedy w naszym projekcie tak jak widać zostały

3:00utworzone dwa pliki, pierwszy z nich to

3:02plik konfiguracyjny Tailwind

3:04a drugi PostCSS.

3:05Jeżeli je teraz sobie podajemy to zobaczymy w nich kilka

3:08interesujących rzeczy.

3:10W przypadku konfiguracji Tailwinda

3:12możemy tutaj dostosować

3:13sobie jego zachowanie, dostępne klasy i ich

3:16wartości oraz również doinstalować pluginy.

3:19Jeżeli chodzi o same pluginy, to tak jak powiedziałem

3:21odgrywają one dość istotną rolę np.

3:23w przypadku Tailwind UI

3:25gdzie musimy po prostu tak jak tutaj

3:27doinstalować sobie plugin wspierający formularze.

3:30No i tutaj swoją drogą ponownie zobaczysz, że IntelliJ domyśla się, że możemy chcieć

3:34doinstalować tutaj Node.js czy też bardziej posiadać

3:38wsparcie dla Node.js w tym pliku konfiguracyjnym

3:41no i w

3:41tym momencie możemy też doinstalować paczkę tailwindcss/forms

3:46Już teraz ten plugin jest dostępny,

3:48aczkolwiek sam Tailwind, jeszcze nie jest dostępny w naszym projekcie.

3:51Tymczasem chciałbym jeszcze

3:52tutaj zwrócić uwagę na typy, czyli konkretnie

3:55w tej sytuacji mamy

3:56komentarz, który pozwala nam się lepiej

3:58odnaleźć w pliku konfiguracyjnym i np.

4:01ustalić sobie Dark Mode bądź inne dodatkowe ustawienia.

4:04No to teraz idźmy dalej w konfiguracji i w tym momencie jesteśmy

4:08proszeni o to, aby określić pliki szablonów

4:11naszej aplikacji.

4:12Zatem mamy tutaj tablicę, w której zapisujemy ścieżki, które

4:15w tym przypadku uwzględniają zarówno plik index.html,

4:18który mamy tutaj, czyli plik

4:20wejściowy oraz jednocześnie praktycznie wszystkie możliwe pliki, które mogą

4:24znaleźć się w katalogu SRC i będą zawierać ewentualne klasy Tailwind.

4:28Następnie interesuje nas

4:30również to, aby w pliku index.css

4:31dodać klasy Tailwind.

4:34Zatem konkretnie mamy tutaj plik style.css

4:37natomiast nas interesuje

4:38utworzenie jeszcze dodatkowego pliku index.css

4:40wewnątrz którego zapiszemy

4:42sobie dokładnie te wspomniane dyrektywę.

4:45Tutaj tylko dodam, że w przypadku IntelliJ bądź np.

4:48WebStorma konieczne będzie doinstalowanie pluginu

4:51Tailwind CSS, który daje wsparcie m.in. dla

4:54tych dyrektyw

4:55oraz dodatkowe elementy ułatwiające wykorzystanie Tailwind.

4:58No i teraz w momencie gdy już mamy ten plik,

5:00tutaj jeszcze musimy go zaimportować

5:02w związku z tym zapiszemy sobie import app.css

5:05no i teraz teoretycznie jesteśmy w stanie

5:07uruchomić naszą aplikację

5:09przy czym oczywiście nie mamy tutaj pliku

5:11app.css tylko index.css

5:13no i jeżeli uruchomimy sobie serwer

5:15to rzeczywiście nasza aplikacja działa.

5:17Mało tego, jeżeli przejdziemy sobie do głównego komponentu

5:21naszej aplikacji, a następnie tutaj np.

5:23zapiszemy sobie inny kolor tła

5:26no to jak widzisz, natychmiast

5:27mamy nasz rezultat. No i teraz

5:29jeszcze chciałbym tylko zwrócić uwagę na

5:31kilka elementów

5:32które dzieją się tutaj pod maską, a które być może zwracają Twoją uwagę

5:36tym bardziej, jeżeli pierwsze wersje Tailwindsą Ci znane.

5:39Mianowicie na pewnym etapie pojawił się tutaj specjalny tryb, w

5:42jakim działał Tailwind, który był znacząco szybszy od tego

5:45standardowego

5:46natomiast w tym momencie

5:47nie ma już potrzeby włączać tej opcji, ponieważ jest włączona natywnie

5:51i drugą opcją była właściwość purge, w

5:54przypadku której mogliśmy podać ścieżki do plików, wewnątrz których pojawiały

5:58się klasy Tailwind i na podstawie analizy

6:00zawartości tych plików było określane to,

6:03które klasy trafią do końcowego pliku wyjściowego naszej aplikacji, a które

6:07zostaną pominięte.

6:09W tym momencie ponownie nie ma takiej potrzeby, aby to definiować, tylko to

6:13wszystko zostało przeniesione do właściwości content.

6:15Zatem w tym momencie mamy tutaj aplikację Vue ze wsparciem Tailwind oraz

6:19również możliwością podłączenia

6:21Tailwind UI i wykorzystania tych

6:23niesamowitych komponentów, a nawet całych templates.

6:26Gorąco zachęcam Cię do tego, aby

6:28przynajmniej przejrzeć sobie możliwości jakie oferuje Tailwind UI

6:31tym bardziej, że rozwinięcie Twojej

6:33znajomości Tailwind oraz modyfikowania tych gotowych template

6:37daje niesamowitą przewagę w kontekście

6:39kodowania interfejsów i też znacząco

6:41skraca cały proces.

6:43Oczywiście wiedzę z tego filmu możesz

6:44połączyć z wiedzą z poprzednich lekcji, gdzie configurowaliśmy

6:48pozostałe elementy naszej aplikacji, takie jak np.

6:51ESLint czy Prettier .

6:52Oczywiście pozostaje tutaj jeszcze wsparcie dla TypeScriptu

6:55ale o tym będziemy sobie rozmawiać w kolejnych lekcjach.

6:58Tymczasem dzięki za uwagę i zapraszam do kolejnych materiałów.