Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Wykup dostęp do bazyZaloguj się kontem Easy

Lekcja 1/ 1Czy Tailwind CSS zastąpi Bootstrapa

0:00 / 0:00
Full-stack i ProgramowanieCzy zastąpi Bootstrapa?

Tailwind CSS: Czy Tailwind CSS zastąpi Bootstrapa

47 min wideo1 lekcja

Adam Gospodarczyk
Wszystkie kursy autora

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

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.

Wersja oprogramowania: 1.8.3+

Kurs Tailwind CSS

1 lekcja47min

  • Czy Tailwind CSS zastąpi Bootstrapa47min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Adam Gospodarczyk
Średnia ocen autora: 4,7

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

Pokaż więcej kursów