Tailwind CSS: Konfiguracja środowiska
od Podstaw
3 godz. 55 min · HTML i CSS · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperCzego się nauczysz
- Zrozumienie podstawowych koncepcji i zalet frameworka TailwindCSS.
- Instalacja i konfiguracji frameworka TailwindCSS.
- Tworzenie stylów strony internetowej przy użyciu gotowych klas CSS.
- Stylowanie strony internetowej w sposób responsywny, tak aby dostosowywała się do różnych rozmiarów ekranów.
- Stylowanie strony internetowej w sposób dedykowany dla wyświetlania na dużych ekranach.
- Zastosowanie różnych technik stylowania, takich jak tworzenie układów za pomocą display flex i display grid.
- Zbudowanie atrakcyjnej strony internetowej, korzystając z frameworka TailwindCSS.
- Optymalizacja pracy i przyspieszenia procesu projektowania interfejsów użytkownika dzięki wykorzystaniu gotowych klas CSS oferowanych przez framework TailwindCSS.
Pierwszy rzut oka na TailwindCSS
W tej sekcji zapoznasz się z frameworkiem TailwindCSS i poznasz podstawowe pojęcia związane z systemem klas. Dowiesz się, czym jest TailwindCSS, jakie problemy rozwiązuje i jakie zalety posiada. Będziesz miał okazję zobaczyć, jak wyglądają gotowe klasy CSS, które oferuje TailwindCSS i jak można je wykorzystać w projektach.
Projekt The Eduweb Times
Ta sekcja zawiera praktyczne zadanie polegające na zbudowaniu strony internetowej projektu The Eduweb Times na urządzenia mobilne. Będziesz mieć okazję zastosować swoje nowo zdobyte umiejętności w praktyce, tworząc atrakcyjną i funkcjonalną stronę internetową.
The Eduweb Times i responsywność
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób responsywny, czyli tak, aby strona dobrze wyglądała na różnych urządzeniach. Zaczniemy od stylowania na Tablety. Nauczysz się, jak tworzyć style, które dostosowują się do rozmiaru ekranu, na którym jest wyświetlana strona.
The Eduweb Times i duże ekrany
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób dedykowany dla wyświetlania na dużych ekranach, takich jak monitory desktopowe. Nauczysz się, jak wykorzystać różne techniki stylowania, aby stworzyć atrakcyjny i funkcjonalny wygląd strony na większych ekranach.
Dla kogo jest ten kurs?
Ten kurs wprowadzający do frameworka TailwindCSS jest przeznaczony dla programistów i web developerów, którzy mają już podstawową wiedzę i umiejętności z zakresu HTMLa i CSSa, ale chcą nauczyć się używać jednego z najnowocześniejszych narzędzi do stylowania stron internetowych.
Przejdźmy więc do naszego terminala i zrobimy sobie
folder specjalnie dla naszego projektu, czyli mkdir.
Zróbmy sobie TheEduwebTimes, no i przejdźmy sobie do tego folderu.
I teraz co możemy zrobić, to zainicjalizujemy sobie nowy projekt.
Wejdźmy na dokumentację Tailwind'a,
skorzystamy znowu z Tailwind CLA i zainstalujemy sobie paczkę npm install Tailwind CSS.
Zainicjalizujemy sobie Tailwind w naszym projekcie poprzez npx tailwindcss init.
Już powstał nam plik konfiguracyjny.
No i w tym momencie możemy sobie otworzyć
nasz edytor kodu i zobaczyć co tam już się stało.
Tutaj plik konfiguracyjny,
na razie jest to pusta konfiguracja,
i package JSON, który mówi nam, że Tailwind CSS jest zainstalowany jako dev dependency.
Przejdźmy sobie do konfiguracji i tutaj wrzucimy informację o tym,
z którego pliku Tailwind powinien czytać style i budować dla nas już ten
plik wyjściowy output CSS, z którego będziemy zaczytować nasze style.
Tutaj mówimy tylko tyle, że hej, Szukaj w pliku w folderze src wszystkich plików
o rozszerzeniu html.js, w których są wykorzystywane style utility
classes i dzięki temu buduj nam plik wyjściowy, który już później dostaniemy na
bundle, który będzie mógł zostać użyty już w wersji produkcyjnej naszej aplikacji.
Mamy już konfigurację wstępną zrobioną.
Teraz sobie stworzymy plik
src input css. Zrobimy sobie nowy plik, w folderze src i input css.
Wkleimy sobie zawartość tego pliku, zapiszemy.
Możemy sobie ten plik zamknąć.
Tą konfigurację też już możemy sobie zamknąć.
Przejdziemy teraz do naszego terminala
i odpalimy sobie komendę, która pozwoli nam zbudować nasz plik output CSS ze stylami.
No dostaliśmy tutaj ostrzeżenie, że na razie nie
wykorzystujemy żadnych utility classes, dlatego mamy tylko i wyłącznie,
co dostaniemy to defaultowy plik output CSS.
Tutaj są tylko i wyłącznie wyzerowane
wszystkie style domyślne, style przeglądarek.
Tailwind dostarcza to od razu, resetuje wszystkie dostępne style w przeglądarce.
Dlatego teraz możemy sobie stworzyć tutaj plik index
html. Plik, na którym sobie będziemy dzisiaj pracować.
Tabulacja tutaj: The Eduweb Times.
Już w tym momencie możemy sobie ten plik otworzyć w naszej przeglądarce.
Za pomocą rozszerzenia Live Server
otworzymy sobie plik w naszej przeglądarce.
Na razie tutaj nic nie widać.
Napiszmy sobie jakieś Hello from Tailwind, no i pojawiło nam się to tutaj.
Natomiast pewnie zwróciłeś uwagę, ale jeszcze nie mamy zaczytywanych styli, bo
są jakieś padding i ten napis nie jest bezpośrednio przy krawędziach.
Jest to spowodowane tym, że po prostu jeszcze nie importujemy sobie naszych styli.
Także wróćmy sobie tutaj do dokumentacji i musimy sobie nasz plik index
hTML wkleić import tego pliku output css i już
dzięki temu style powinny być zresetowane i powinniśmy mieć tak, inna czcionkę,
I padding i margin jest na 0 z dwóch stron.
Przejdźmy sobie teraz do powolnego
odwzorowywania tego design'u, który dostaliśmy tutaj.
Skupimy się na urządzeniach mobilnych, czyli zaczniemy sobie od tego headera.