Czy Tailwind CSS zastąpi Bootstrapa

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.

Tailwind CSS

Czego się nauczysz