Zbuduj własne portfolio z Tailwind CSS: Konfiguracja środowiska

0:00Zanim zaczniemy, jakby konfigurować nasz projekt,

0:04to chciałbym, żebyś upewnił, upewniła się, że masz zainstalowany Node JS.

0:08Można to zrobić w taki sposób, że mamy node - -version i w tym momencie

0:13powinna wyskoczyć odpowiedź jakiego typu wersję masz na swoim systemie operacyjnym.

0:18Jeżeli nie masz Node'a zainstalowanego, to trzeba

0:20po prostu sobie wejść na stronę internetową Nodejs.org

0:23i tam ściągnąć sobie instalator na Twój system operacyjny.

0:27Tak samo chciałbym żebyś zainstalował, zainstalowała.

0:30Generalnie Node przychodzi z package managerem

0:32w postaci npm natomiast ja tutaj w tym kursie będę korzystał z pnpm.

0:36Jeżeli chcesz sobie zainstalować na pnpm to po prostu wystarczy sobie wyszukać w

0:40Google pnpm strona instalacji i tam już jest łatwo dostępna.

0:45Ja na swoim systemie operacyjnym w chwili

0:47obecnej teraz kiedy nagrywam ten warsztat mam wersję 8.7.1

0:52także to są dwie rzeczy, które potrzebujemy.

0:54Tworzymy sobie nowy folder do naszego projektu.

0:59Zróbmy sobie folder pod tytułem portfolio no i przeskoczymy do tego folderu.

1:08I ja w tym momencie, już teraz jak już

1:10mamy ten folder otworzę sobie ten folder w moim edytorze kodu poprzez code i kropka.

1:17Mamy pusty folder w naszym edytorze kodu otwarty.

1:21Dodatkowo na pewno będziemy potrzebowali

1:23tutaj gdzieś obok przeglądarkę, żebyśmy mogli pracować sobie w tym momencie.

1:27Jak już mamy otwarty folder w naszym edytorze kodu, to kilka rzeczy,

1:32które chciałbym żeby wziął, wzięła pod uwagę.

1:34Otóż na pewno potrzebujemy rozszerzenia pod tytułem Live Server, czyli Install

1:40Extensions i tutaj musimy sobie wyszukać Live Server no i w tym momencie

1:45te rozszerzenie jest dostępne, jakby powinno być od razu zainstalowane.

1:50Visual Studio code jeżeli korzystasz z tego samego edytora, z którego ja korzystam.

1:53Server mamy za sobą.

1:55Kolejna rzecz, którą będziemy potrzebować

1:57to zaincjalizować tutaj w naszym projekcie Tailwind CSS.

2:02Robimy to poprzez pnpx init Tailwind CSS, czyli ja

2:06teraz sobie tutaj przejdę do mojego trminala i za pomocą pnpx Tailwind CSS init.

2:16Inicjalizujemy jakby Tailwind w naszym tutaj w naszym folderze.

2:20Folderze ściągną się paczki odpowiednie do tego i mamy Tailwind config

2:23JS jak gdyby to jest domyślny plik

2:25konfiguracyjny Tailwind'a już tutaj został nam zaincjalizowany.

2:29Kolejną rzecz, którą będziemy potrzebować zrobić, to tak naprawdę stworzyć sobie

2:34strukturę folderów dla naszego projektu.

2:38Czyli stworzymy sobie folder build. Gdzie będzie

2:42wynikowe style, które zostaną zbudowane dla naszego projektu.

2:47I stworzymy sobie również folder src.

2:50Może nie bezpośrednio w folderze build,

2:52ale chcielibyśmy to też na root'cie tak naprawdę na głównym folderze.

2:57I mamy src.

2:58Teraz w folderze src tworzymy sobie plik input css, w którym wkleimy sobie.

3:05Musimy tutaj wkleić podstawowe dyrektywy Tailwind'a,

3:09które będą wykorzystywane przez nasz projekt.

3:11Mianowicie standardowo jest to Tailwind Base, Tailwind Components i Tailwind Utilities.

3:17W naszym przypadku to wszystko tutaj zostanie.

3:20Teraz w folderze tak naprawdę Build stworzymy sobie plik index html.

3:26Tutaj w naszym folderze stworzymy sobie

3:28index.html i folder image, gdzie będziemy mieli tak naprawdę nasze obrazki.

3:38Obrazki, które będziemy wykorzystywali w naszym, w naszym tutaj,

3:42w naszym projekcie mamy nasz imput CSS, mamy konfigurację Tailwind'a za sobą.

3:47Tak jak wspominałem wszystkie obrazki z

3:48projektu będą dostępne dla Ciebie w materiałach dodatkowych do tego projektu.

3:52Także nie martw się jeżeli chcesz dokładnie odwzorować

3:54tą stronę, którą przed chwilą Ci pokazałem to wszystkie obrazki będą dostępne.

3:59I teraz musimy sobie tak naprawdę skonfigurować nasz Tailwind config.js.

4:03Mianowicie musimy powiedzieć

4:06gdzie chcemy, skąd chcemy pobierać content, żeby budowane były nasze style.

4:12I tutaj w naszym przypadku będzie to build

4:16katalog root'owy, później mamy build czyli ten folder tutaj.

4:19No i plik *HTML

4:21mówi Tailwind'owi o tym, że z wszystkich plików HTML ma silnik budujący style,

4:26ma patrzeć, które style są wykorzystywane w plikach HTML i jakby

4:30wynikowy plik ma zostać tworzony na bazie plików HTML w naszym projekcie.

4:36Tak jak mówię, to mówi silnikowi, żeby kompilował style właśnie z folderu build i

4:41ze wszystkich plików z rozszerzonym HTML tak naprawdę.

4:45I teraz chcemy zaincjalizować sobie projekt pnpm init musimy sobie tutaj wpisać.

4:51Czyli ja korzystam tutaj jakby z package manager'a pnpm.

4:54Jeżeli korzystasz z package manager'a

4:56z npm to npm init i w moim przypadku pnpm init no i został zaincjalizowany package JSON

5:05plik, tak? Tutaj i teraz jakby

5:08po stworzeniu tego pliku konfiguracyjnego package JSON

5:12możemy sobie wpisać tutaj 1 skrypt, który będziemy na chwilę obecną potrzebować,

5:16mianowicie skrypt związany z budowaniem styli Tailwind.

5:21To tak naprawdę będzie praktycznie jedyny

5:23skrypt, który będziemy potrzebować w tym warsztacie.

5:26To jest skrypt, który mówi nam mniej ni

5:28więcej, że on odpowiada tak naprawdę za budowanie pliku ze stylami dla naszego projektu.

5:33I tutaj minus i wskazuje nam gdzie znajduje się input dla styli.

5:38W naszym przypadku jest to src input css czyli dokładnie ten plik tutaj jest jakby

5:43plikiem wejściowym dla Tailwind CSS, żeby budować style.

5:47A tutaj -O mówimy gdzie style powinny się tak naprawdę zbudować.

5:52Dodatkowo opcja watch pozwoli nam tutaj pracować nad tym plikiem

5:56i cały czas te pliki będą się przebudowywały w miarę naszych zmian w pliku index html.

6:02Tak że tym momencie jeżeli uruchomimy sobie ten

6:04skrypt to będzie to stworzy nam to już bazowe style.

6:09Natomiast zanim za to

6:11zanim sobie uruchomimy pierwszy raz ten skrypt to jeszcze zainstalujmy sobie

6:15dev dependency w naszym projekcie, mianowicie plugin do Tailwind'a, który też przyda nam się

6:21tutaj podczas budowania tego, tego projektu.

6:26I teraz tutaj pnpm add - D bo to jest dev dependency i to co chcemy sobie teraz

6:31zbudować no i my chcemy prettier i dodatkowo plugin Tailwind CSS, tak?

6:38To jest plugin który chcemy sobie teraz dodać.

6:41No i zobacz, że w dev dependency pojawił się nowy plugin Tailwind CSS

6:46i teraz będzie on odpowiedzialny za sortowanie klas, które będziemy używać

6:50żeby zadziałał musimy tak naprawdę skonfigurować sobie prettier'a w projekcie

6:55w pliku prettier config js.

6:57Czyli otworzymy sobie teraz tutaj nasz projekt, zminimalizujemy wszystko i

7:01tutaj potrzebujemy stworzyć prettier config js.

7:07No i w naszym przypadku musimy sobie

7:09wyeksportować module export i tutaj plugin prettier, plugin Tailwind CSS.

7:15Już w tym momencie będą jakby automatycznie startowały nam się style

7:20Tailwind'owe, które będziemy wykorzystywać w pliku index html.

7:23Tą konfigurację mamy za sobą i tak

7:25naprawdę powinieneś u siebie też zobaczyć tutaj folder node module.

7:29Natomiast ja go mam dodany do

7:31folderów zignorowanych, dlatego też nie widać ich tutaj w tym explorerze.

7:36Natomiast jeżeli u Ciebie się ten folder

7:38pojawi to jak najbardziej wszystko jest w porządku.

7:41Nic złego się nie dzieje, bo zainstalowaliśmy

7:42dev dependency i dzięki temu paczka się zainstalowała.

7:45No i mamy folder node module już tutaj w naszym głównym folderze

7:49i zawsze dobrze jest zapisywać stan naszego projektu gdzieś.

7:52Tak naprawdę zaincjalizujemy sobie repozytorium na

7:55GitHubie, ale najpierw dobrą praktyką jest to, kiedy już mamy node module, żeby

7:59pokazać systemowi kontroli wersji, żeby nie zapisywał niepotrzebnie plików np.

8:05z katalogu node module,

8:06robimy to za pomocą pliku gitignore.

8:09I tutaj mogę sobie wpisać node modules, żeby ten plik został ignorowany.

8:15Dodatkowo musimy też dodać skrypt do

8:18narzędzia prettier, które ujednolicić formatowanie w naszych plikach.

8:22W pliku package JSON,

8:23który mamy tutaj musimy sobie dodać kolejny skrypt,

8:28mianowicie prettier, który będzie odpowiadał nam za

8:32po prostu układano ładnie składnik już po

8:35odpowiednim sformatowaniu mamy zapisany kolejny tutaj

8:39skrypt, który pomoże nam w naszej pracy i tak naprawdę potrzebne nam to będzie do

8:43zachowania odpowiedniej kolejności, kiedy będziemy używali Tailwind'owych klas w

8:47naszych elementach i jest to bardzo ważne, szczgólnie kiedy pracujesz w zespole.

8:51Korzystamy głównie z prettier'a w zespole, żeby wszyscy mieli tak samo sformatowane

8:55pliki. Żeby zacząć pracę nad naszym projektem,

8:57musimy wystartować naszą komendę Tailwind i robimy to za pomocą pnpm Tailwind.

9:03I w tym momencie, jeżeli jakby startuje tutaj node package mój

9:07pnpm package manager no i wskazuję skrypt, który chce uruchomić czyli Tailwind

9:12w tym momencie zauważ, że tak naprawdę w katalogu build jeszcze nie mamy tutaj żadnego

9:16katalogu związanego z CSS'em, natomiast jak to wystartuje

9:19to już powinien się pojawić plik i plik CSS ze stylami i to co tutaj widzimy.

9:26Te style, które zostały teraz wygenerowane to jest tzw.

9:29prewlight w Tailwind'zie i są to domyślne style Tailwind'owe

9:34może to trochę rozszerzę tutaj, które są jakby domyślnie dostarczane.

9:37To jest reset styli, który mamy domyślnie dostarczane nam przez twórców

9:41tej biblioteki i to co widzisz to style CSS.

9:45To jest domyślny zestaw styli.

9:47Te style zostały już bardzo dobrze

9:48przygotowane i nie musimy się martwić resetami styli.

9:51Dostajemy tak naprawdę świetnie

9:52wyglądający font, który jest tutaj określony font family.

9:57Dodatkowo linki nie są podkreślone.

9:59Kasujemy marginesy na elementach body, heading i innych tego typu.

10:04Tak że myślę, że więcej możesz sobie poczytać też dokumentacji Tailwind.

10:07Natomiast to jest jakby reset styli, który

10:09jest domyślnie zrobiony. I zobacz, że mamy tutaj tzw.

10:13watch włączony.

10:14Czyli w tym momencie już jak coś sobie

10:15zmienię to ten plik powinien się przebudować.

10:18Dodatkowa rzecz, który warto wspomnienia

10:20to tutaj też Tailwind domyślnie zmienia zachowanie obrazków na stronie.

10:25Czyli wszystkie obrazki zajmują 100%

10:26szerokości, domyślnie są elementami blokowymi.

10:30Jak sobie to zobaczymy tutaj wyszukamy image.

10:32To zobacz, że mamy display block

10:35i kolejny taki image, który znajdujemy tutaj.

10:38Zobacz mamy max width 100% i height auto, tak?

10:42Czyli to jest domyślna zmiana, która tutaj jest jakby od razu za stylowana i dodatkowo

10:48jest kilka rzeczy, na które chcę zwrócić Twoją uwagę.

10:50Otóż nagłówki nie mają swoich domyślnych styli.

10:54Zobacz, że tutaj mamy h1.

10:57Jeżeli sobie wyszukamy tą h1 to jest

10:59ona wspomniana dwa razy i zobacz, że font size, font weight jest inherit.

11:03I drugi rzecz gdzie jest h1 wspomniana.

11:06To jest margines ustawiony na 0, czyli

11:08wszystkie te nagłówki nie mają swoich domyślnych styli jakie

11:11widzisz w przeglądarce i skasowanie wszystkich obramowania elementów czyli

11:15imputy i inne rzeczy też nie będą miały swojego obramowania.

11:19Czyli jak tutaj sobie przejdziemy na input to zobacz, że mamy

11:23jest ustawione na 0 i dodatkowo jeżeli chodzi o kolor też mamy inherited.

11:27Wszystko zrobione także też tutaj też nie ma jakby tych dodatkowych obramowań.

11:33Kolor też ustawiony jakoś domyślne tutaj

11:35preflight'a standardowego, tak?

11:37To tyle z takiej krótkiej konfiguracji.

11:39Teraz przejdziemy do dalszej części tego warsztatu.