Tailwind CSS: Wstępna konfiguracja środowiska

0:00Tailwind CSS jest frameworkiem, dzięki któremu za pomocą utility classes możemy sobie budować

0:04poszczególne elementy naszego UI'a na stronie internetowej.

0:07Zobacz jak to tutaj wygląda na tej animacji.

0:10Teraz skonfigurujemy sobie środowisko,

0:11żebyśmy mogli razem podążać dalej w tym kursie.

0:14Dlatego proszę Cię, wejdź sobie na stronę, nodejs.org.

0:17Musimy sobie ściągnąć i zainstalować to

0:19środowisko uruchomieniowe, dzięki czemu będziemy mogli korzystać z npm package

0:23managera, który pozwoli nam zainstalować Tailwind CLI.

0:26Ściągnij sobie ostatnią wersję,

0:29zainstaluj w swoim systemie, kiedy już będzie to zainstalowane

0:32możemy sobie przejść teraz na stronę tailwindcss i tutaj w dokumentacji.

0:37My skorzystamy z instalacji za pomocą Tailwind CLI. i przejdziemy przez te wszystkie kroki,

0:42i zainstalujemy sobie nasze środowisko uruchomieniowe.

0:45Ja teraz w tym celu stworzę sobie prosty

0:47katalog tailwindcss, przeskoczymy do tego katalogu i tutaj

0:51możemy sobie zacząć instalować nasze paczki.

0:53Najpierw zaincjanizuje nasz projekt poprzez npm install -D tailwindcss.

0:57W tym momencie zainstalowała się nasza paczka no i zainicjalizujemy plik

1:02konfiguracyjny tailwind w naszym projekcie poprzez wywołanie komendy npx tailwindcss init.

1:08W tym momencie już projekt, w projekcie Tailwind został zainicjalizowany.

1:12Jeżeli sobie teraz utworzymy ten folder w

1:14dowolnym edytorze kodu, w moim przypadku jest to Visual Studio Code, to powinieneś mieć

1:18w swoim folderze trzy pliki package log json, packagejson, który mówi, że zainstalowana

1:23została paczka Tailwind CSS wersja 3 2.4 to jest wersja, z której będziemy korzystać.

1:28Podstawowa konfiguracja Tailwinda, gdzie jeszcze nie ma nic tak naprawdę wpisanego.

1:32Zbudujemy sobie jeden element UI, żebyś widział/widziała

1:36jak szybko można poruszać się za pomocą

1:38utility class, jak szybko można budować swoje elementy UI'a.

1:40Do tego przejdźmy sobie dalej.

1:42Wrzucimy sobie tutaj zgodnie z tym, co mówią twórcy,

1:45content, to oznacza ni mniej ni więcej, że Tailwind po prostu zczytuje pliki o rozszerzeniu HTML.js,

1:50i widzi, które style, które utility classes

1:55używamy w naszych plikach i dzięki czemu może nam zbudować ostateczną wersję

1:59pliku ze stylami, który będzie używany w naszym projekcie.

2:01Teraz musimy sobie stworzyć plik bazowy, który zaczyta wszystkie możliwe klasy z Tailwinda.

2:06Stworzymy go sobie tutaj w katalogu src i plik będzie nazywał się Input css.

2:12Zróbmy sobie teraz ten nowy plik, src,

2:14input css no i do tego pliku wkleimy sobie tutaj zawartość.

2:18Po skonfigurowaniu tego pliku możemy sobie

2:21odpalić komendę, która będzie nam budowała nasze style.

2:24To oznacza tylko tyle, że Tailwind

2:26po pierwsze sobie plik src, input css i niejako stworzy nam plik wyjściowy,

2:31który będzie zaczytywany przez nas plik index html,

2:34w którym będą wszystkie style, które

2:36są potrzebne do tego, aby prawidłowo wyświetlać elementy na naszej stronie.

2:40Kopiujemy sobie tą wartość, tutaj przejdziemy sobie do

2:42naszego terminala i odpalimy proces, który będzie budował nasze style.

2:46No, dostajemy tutaj ostrzeżenie, że żadna klasa nie została jeszcze użyta.

2:49Dlatego też musimy przejść do naszego

2:51projektu, zbudować pierwszy plik, w którym będziemy wykorzystywać nasze style.

2:56Zróbmy sobie go w katalogu src, z tego względu, że to wskazaliśmy tutaj w

3:01konfiguracji, że tutaj w tym katalogu będą nasze pliki HTMLi js, które Tailwind

3:06powinien śledzić i z których powinien pobierać style, z których właśnie korzystamy.

3:10Przejdźmy sobie teraz tego katalogu src.

3:11Stworzymy sobie index html no i tutaj za pomocą boilerplatu, czyli wykrzyknik i

3:16tabulacja, mamy prosty plik html'owy, do którego musimy sobie zaczytać plik output,

3:22który wyjdzie nam właśnie z tej komendy, która tutaj buduje nam nasze style.

3:26Natomiast na początku zróbmy sobie ten

3:28link, dodamy go sobie tutaj do pliku index html.

3:31Tutaj już mamy zaczytywanie tych styli, które zostaną zbudowane i żeby cokolwiek zostało

3:35zbudowane dzięki całemu mechanizmowi just in time Tailwinda, który buduje nam tylko i

3:40wyłącznie, zwraca nam tylko i wyłącznie te style, z których będziemy korzystali.

3:44Musimy z czegoś korzystać, czyli wrzucimy sobie tutaj class no i zróbmy bg-red.

3:49Zapisaliśmy to sobie teraz tutaj

3:51nasze style powinny zostać zbudowane i w

3:53tym momencie powinien w naszym katalogu src dist pojawić się output.css.

3:58I tu jest plik ze stylami, które zostają zapisane do naszego pliku index html.

4:02i teraz jeżeli sobie odpalimy ten plik index html

4:05no to mamy czerwone tło i wstępna konfiguracja jest już zakończona.

4:09Teraz możemy zacząć pracować z tym

4:11frameworkiem, budować kolejne elementy naszego UI'a.