Wprowadzenie

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.

Dlaczego wybrać właśnie ten kurs?

1. 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!
2. 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.
3. 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ń.