Masz już konto? Zaloguj się

Kurs Tailwind CSS

W tym Materiale poznasz jego wady i zalety na tle innych dostępnych na rynku rozwiązań stworzonych z myślą o skalowalnym zarządzaniu kodem CSS.

1 lekcji

47min

5 (6 oceny)

Tailwind CSS - Czy zastąpi Bootstrapa?

Arkusze stylów CSS pozornie są proste do opanowania i nie ma w nich zbyt wielu skomplikowanych elementów. Największym wyzwaniem okazuje się jednak zarządzanie nimi wraz z rozwojem projektu. Z tego powodu powstało wiele bibliotek i technik zarządzania kodem CSS. Przez lata najpopularniejszy był Bootstrap oraz konwencja nazewnicza - BEM CSS. Od niedawna stosunkowo świeże podejście prezentuje Tailwind CSS, który rozwiązuje problem w zupełnie nowy sposób. W tym Materiale poznasz jego wady i zalety na tle innych dostępnych na rynku rozwiązań stworzonych z myślą o skalowalnym zarządzaniu kodem CSS.

Czym jest Tailwind?

Tailwind to framework CSS przygotowany przez Adam Wathan’a i Steve’a Schoger’a, znanych wcześniej z bloga refactoringui.com oraz genialnego ebooka o tej samej nazwie. Wykorzystując swoje doświadczenie na temat projektowania UI/UX - przenieśli je na możliwości CSS, tworząc narzędzie odpowiadające na wiele problemów z którymi musieliśmy sobie radzić korzystając z frameworków takich jak Bootstrap.

Nazewnictwo

Tailwind określany jest mianem „utility-first framework”. Jego głównym elementem są klasy CSS posiadające intuicyjne nazwy. Każda z nich posiada jedną lub niezbędne minimum właściwości CSS. Dzięki temu dodając klasy do elementu HTML, jesteśmy w stanie łatwo łączyć je ze sobą i nadpisywać w razie potrzeby. Jednocześnie niemal całkowicie przestaje nas dotyczyć problem związany z koniecznością wymyślania nazw klas.

Zbyt wiele klas i style inline?

Na pierwszy rzut oka wykorzystanie Tailwind CSS wymaga dodawania wielu klas do elementów, zmniejszając czytelność kodu. Dodatkowo sam styl bardzo przypomina sytuację w której style piszemy bezpośrednio wewnątrz atrybutu „style”. W praktyce jednak takie podejście daje większą elastyczność niż pisanie stylów „inline’owo”, a liczbę klas można redukować wykorzystując opcje dostępne w Tailwind lub korzystając z frameworków JavaScript oferujących komponenty.

Brakujące klasy

Tailwind udostępnia nam zestaw klas z pomocą których stylujemy elementy interfejsu. Często okazuje się jednak, że brakuje nam klasy np. pozwalającej ustawić właściwość „left: 25px;”. Jest to celowe działanie, które początkowo wydaje się nieintuicyjne i ma związek z zasadami designu oraz spójnością, która w dużym stopniu wpływa na jakość naszego projektu. Inaczej mówiąc - w znacznej większości przypadków nie powinno nam już zależeć na tzw. „pixel perfect” (który od dłuższego czasu nie istnieje), lecz na zachowaniu jednolitych marginesów, interlinii i wielkości fontów.

Ekosystem

Pomimo tego, że Tailwind jest stosunkowo nowym rozwiązaniem, już teraz cieszy się dużą społecznością i narzędziami które powstają wokół niego. To wszystko sprawia, że poza samym frameworkiem, warto sięgać po narzędzia takie jak Tailwind UI czy serwisy, np. Tailwindcomponents, aby dodatkowo ułatwić sobie posługiwanie się tym rozwiązaniem.

Dla kogo jest ten kurs?

Ten warsztat dedykowany jest osobom chcącym poznać framework Tailwind CSS oraz zrozumieć jego wady i zalety na tle innych dostępnych na rynku rozwiązań stworzonych z myślą o skalowalnym zarządzaniu kodem CSS. Aby w pełni skorzystać z wiedzy dostępnej w nagraniu, warto posiadać doświadczenie z technologiami: HTML oraz CSS i podstawami JavaScript.

Czego się nauczysz?

  • Czym jest Tailwind CSS?

  • Idea, zalety, wady i kompromisy

  • Przeglądarka Sizzy

  • Konfiguracja Tailwind CSS

  • Stylowanie komponentów w praktyce

  • Style responsywne

  • Własne klasy i ustawienia

  • Konfiguracja wersji produkcyjnej

  • Ekosystem i dodatkowe narzędzia

Autor kursu

Adam Gospodarczyk

Średnia ocen autora: 5

Bio
Nazywam się Adam Gospodarczyk, jestem designerem i full-stack developerem. Przez całą swoją karierę zawodową pracuję w świecie startupów z branży edukacji, szkoleń pracowników oraz rekrutacji. Jestem współzałożycielem trzech produktów, które rozwijałem w roli CTO od samego początku. Przez ten czas zdobyłem szerokie doświadczenie znacznie wykraczające poza zakres samej technologii. W maju 2017 roku założyłem kanał na YouTube „overment” (https://overment.com) w ramach side-project’u po godzinach. Dziś jest to jeden z największych w Polsce tego typu projektów dla programistów za który otrzymałem nagrodę „JavaScript Hero of Community” podczas konferencji JS Poland 2019. Łącząc moje startup’owe doświadczenie z pasją do technologii, pomogę Ci nauczyć się programowania patrząc szerzej na perspektywę całego biznesu - jest to doceniana przez pracodawców umiejętność, którą wiele osób całkowicie pomija. Przy tym wszystkim pokażę Ci jak ważna jest regularna nauka i pozostawanie na bieżąco.
Inne kursy tego autora
Prompt Engineering Osobisty Avatar AI No-code Newsletter na Autopilocie NestJS w Praktyce NestJS od Podstaw

Dołącz do ponad 10 tys. zadowolonych z naszych kursów

Warsztat pojawił się w idealnym czasie. Właśnie pojawił się Laravel 8 domyślnie korzystający z Tailwind

Piotr Nadolski

14 września 2020

Świetny warsztat!!!!

Waldemar Groń

17 września 2020

Super warsztat, polecam

Urszula Kopycka

18 września 2020

Kolejny wspaniały warsztat. Polecam.

Robert Studziński

26 września 2020

Mikołaj Martyna

28 czerwca 2021

Bartosz Pazdur

8 sierpnia 2021

Kurs Tailwind CSS

  • 1 lekcji wideo

  • 47min materiału

  • Ostatnia rewizja 14.09.2020

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych

Dlaczego wybrać właśnie ten kurs?

Efektywna nauka

Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!

Wiedza ekspertów

Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.

Praktyczne przykłady

Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Pytania i odpowiedzi

Przeczytaj najczęściej zadawane pytania

Masz więcej pytań?

Porozmawiaj z nami na na czacie

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.

Jak jest skonstruowany kurs?

Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.

Jak najlepiej wykorzystać kurs?

Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!

Jak mogę uzyskać dostęp do kursu?

Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.

Czy kurs jest aktualny?

Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.

Czym się różni kurs od warsztatu i ścieżki?

Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.

We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.

Adam Romański

helloroman.com

Zacznij naukę w Tailwind CSS

  • 1 lekcji wideo

  • 47min materiału

  • Ostatnia rewizja 14.09.2020

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych