Tailwind CSS na przełomie ostatniego roku zdobywa coraz większą popularność. W dużym stopniu jest to w pełni zasłużone. Projektowanie interfejsów z jego pomocą jest wygodne. W dodatku Adam Wathan z zespołem, intensywnie pracuje nad rozwojem całego projektu, słuchając potrzeb użytkowników. Ale jak to wygląda w praktyce?
Mieszane pierwsze wrażenie
Tailwind to biblioteka oferująca bazę klas CSS. Czyli w pierwszej chwili brzmi jak Bootstrap, Foundation czy Bulma. Kolejny framework CSS? Dzięki ale nie...a może?
No ale w końcu już na pierwszy rzut oka jasno widać, że ostylowanie przycisku w Tailwind i Bootstrapie znacząco się różni i to na korzyść Bootstrapa.
Bootstrap:btn btn-primary
i Tailwind:bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded
W tym miejscu wielu znanych mi developerów po prostu przekreśla Tailwind, twierdząc że przecież nie ma to najmniejszego sensu aby do ostylowania pojedycznego elementu wykorzystywać aż tyle klas. Tym bardziej że interfejsy zwykle są znacznie bardziej skomplikowane i późniejsze wprowadzenie zmian w projekcie nie jest łatwe.
No ale spójrzmy na to inaczej: spróbuj zmienić padding lub zaokrąglenie rogów przycisku w przypadku Bootstrapa. Nie brzmi to jak duże wyzwanie, bo wystarczy nadpisać zachowanie obecnych klas lub zgodnie z dobrą praktyką - dodać kolejną klasę i z zachowaniem odpowiedniej specyficzności, dodać do niej nowe własciwości.
Ale czy to nie brzmi jak złożony proces? Tym bardziej że nadpisywanie właściwości niektórych elementów zdefiniowanych z pomocą bootstrapa wymaga pisania selektorów, które z całą pewnością nie są ani eleganckie ani tym bardziej proste w utrzymaniu.
Natomiast w przypadku Tailwind, wystarczyłoby zmienić tylko jedną klasę!
Muszę się powtarzać. Muszę się powtarzać.
Ale jak to jedną klasę? Jeżeli na stronie mam wiele przycisków, to wcale nie jest prawdą że wystarczy zmienić klasę w jednym miejscu, ponieważ trzeba odnaleźć wszystkie jego wystąpienia (co nie zawsze jest łatwe) i wprowadzić zmianę.
No ale jeżeli się nad tym zastanowimy to obecnie niemal w każdej aplikacji projektujemy interfejs opierając go o komponenty. To sprawia, że faktycznie często wystarczy wprowadzenie zmian w jednym miejscu a wszystkie instancje od razu zmienią swój wygląd.
Poza tym nawet jeżeli nie korzystamy z komponentów, to nadal mamy możliwość rozszerzania Tailwind o własne klasy z pomocą dyrektywy @layer. Dzięki temu ponownie możemy zaprojektować interfejs tak, aby ewentualne zmiany mogły być wprowadzane w jednym miejscu.
W dodatku dzięki takiemu rozszerzeniu możemy znacznie zredukować liczbę klas przypisywanych do elementu a tym samym balansować pomiędzy szybkim developmentem opartym o Tailwind oraz dużej elastyczności.
Czyli nagle dochodzimy do punktu, w którym Tailwind może robić nas pierwsze negatywne, ale mylne wrażenie. I szczerze mówiąc wcale mnie to nie dziwi, tym bardziej że faktycznie wśród znajomych programistów widzę osoby, które początkowo sceptycznie podchodziły do Tailwind, a wraz z upływem czasu stali się jego regularnymi użytkownikami.
Sam korzystam z Tailwind niemal od samego początku i już kolejny rok wykorzystuję go niemal w każdym moim projekcie.
Tailwind mnie ogranicza!
Kolejnym argumentem przeciw Tailwind, który bardzo często jest poruszany to fakt ograniczeń, które narzuca biblioteka. I ma to dwa wymiary.
Pierwszym z nich dosłownie są "wymiary" - klasy predefiniujące paddingi, marginesy, przesunięcia elementów czy palety kolorów.
Jednak tutaj ten argument pada w pierwszej chwili gdy otwieramy plik konfiguracyjny Tailwind, który daje nam możliwość dostosowania generowanych klas i przypisanych do nich właściwości. Zatem w zależności od naszych potrzeb możemy skonfigurować odpowiednie marginesy, rozmiary fontów czy breakpointy. W dodatku mowa nie tylko o nadpisywaniu istniejących klas ale również dodawaniu własnych.
Poza tym w temacie ograniczeń musisz wiedzieć coś, z czego być może nie zdajesz sobie sprawy. Mianowicie w projektowaniu interfejsów i ogólnie w designie, bardzo dużą rolę odgrywa spójność.
Mowa tutaj o spójności na którą składają się małe detale o których doskonale wiedzą projektanci a wszyscy pozostali po prostu "czują" gdy coś wygląda dobrze a kiedy nie.
W praktyce chodzi o wspomniane już marginesy, odcienie kolorów, stałe zaokrąglenie narożników czy grubość obramowania. Pisząc kod CSS samodzielnie możliwe jest zachowanie tej spójności ale tylko wtedy jeżeli posiadamy odpowiednie doświadczenie w zorganizowany klas i właściwości. W przypadku Tailwind początkową konfigurację mamy dostępną w zasadzie "out of the box". A w dodatku jesteśmy w stanie ją łatwo modyfikować i dostosować do swoich potrzeb.
Poza tym również możesz nie wiedzieć o tym że w świecie designu aktualnie ogromną rolę odgrywają tzw. "Design Systems". Ostatecznie zapewne znane są Ci chociażby Material Design, Ant Design czy biblioteki komponentów takie jak chociażby Prime. Każdy z nich ma na celu wprowadzenie wspomnianej wcześniej spójności na przestrzeni całego projektu czy nawet wielu produktów oraz przyspieszenia procesu projektowania oraz późniejszego wdrożenia.
Szybko, szybciej, Tailwind
W Tailwind również mamy do dyspozycji niesamowity UI Kit rozwijany bezpośrednio przez twórców. Mowa tutaj o płatnym (jednorazowo) Tailwind UI, który sam również wykorzystuję praktycznie we wszystkich projektach.
Tutaj do naszej dyspozycji aktualnie mamy gotowe komponenty dostępne zarówno w formie projektu w Figmie ale również w formie kodu HTML i jasną instrukcją wdrożenia w popularnych frameworkach JavaScript. W dodatku regularnie pojawiają się aktualizacje dodające nowe komponenty, które łatwo możemy wykorzystywać nawet w istniejących projektach.
I tutaj ponownie niesamowitą zaletą połączenia Tailwind UI oraz możliwości konfiguracji samego Tailwinda jest fakt, że możemy w ciągu nawet kilkudziesięciu minut przygotować rozbudowaną i w pełni responsywną stronę www. Nic też nie stoi na przeszkodzie aby łatwo nadpisać np. kolorystykę i fonty.
Na tym etapie jednak muszę podkreślić, że bardzo ważną rolę odgrywa umiejętność odnalezienia się zarówno w samej konfiguracji Tailwinda jak i pracy z Figmą. Wynika to z faktu, że nawet jeżeli pracujemy na gotowym projekcie przygotowanym przez designera, to nadal musimy odnaleźć się w tym jak zorganizowane są komponenty oraz ich właściwości. Bez przynajmniej podstawowej znajomości Figmy oraz funkcji takich jak Komponenty oraz Auto-Layout, możemy mieć problem aby nawet sprawnie nawigować po projekcie.
Na koniec dnia wspomniana wyżej umiejętność przydaje się nie tylko w przypadku Tailwinda ale każdej innej biblioteki (lub jej braku).
Kiedy Tailwind się nie sprawdzi?
Nie ulega wątpliwości, że Tailwind nie jest rozwiązaniem perfekcyjnym. Niektóre zarzuty skierowane w jego stronę są jak najbardziej trafne. W końcu faktycznie patrząc chociażby na Tailwind UI, nawet w przypadku dość prostych elementów interfejsu, widzimy jak wiele klas musimy dodać aby je stworzyć. Poza tym zarządzanie nimi w ramach jednego komponentu też jest odpowiednio trudniejsze niż "ręczne napisanie kodu CSS". Z drugiej strony sam przekonałem się wielokrotnie, że pomimo tego nadal wykorzystanie Tailwind CSS jest szybsze.
I jeżeli już o szybkości mowa to faktycznie spotkałem się z bardzo długą stroną sprzedażową stworzoną w Tailwind CSS, która dostała "po głowie" w rankingu szybkości (co prawda nieznacznie ale jednak) za zbyt dużą strukturę HTML.
Dodatkowo nadal często spotykam się z projektami w których niezbędne jest dostosowanie interfejsu do projektu z dokładnością "pixel perfect" (co w mojej opinii już nie istnieje a korystanie z tego określenia wynika z ignorancji lub niewiedzy na temat wieloplatformowości). Nie zmienia to jednak faktu - czasem wymagania dotyczące dokładnego odwzorowania interfejsu sprawiają że sięganie po jakiekolwiek biblioteki CSS przysporzy nam więcej kłopotów niż korzyści i Tailwind nie jest tutaj wyjątkiem.
Spotkałem się również z opinią, że sam Tailwind UI również jest mało użyteczny ponieważ modyfikowanie komponentów zajmuje więcej czasu niż przygotowanie alternatywnej wersji od zera. Z tym akurat się nie zgadzam i uważam, że ponownie wynika to po prostu z małego doświadczenia w pracy z Tailwind - sam również przez to przechodziłem.
No i ostatecznie Tailwind raczej nie jest dobrym pomysłem dla osób które dopiero ucza się CSS. Wynika to z faktu, że w wielu przypadkach komponenty wykorzystują zaawansowane techniki CSS bez których zrozumienia trudno jest wprowadzić jakiekolwiek zmiany. Ale już po Tailwind śmiało można sięgnąć w momencie dobrego zrozumienia fundamentów CSS, Flexboxa oraz Grida.
Czy Tailwind rzeczywiście jest warty uwagi?
Krótko: tak.
Tailwind w mojej opinii jest obecnie najlepszym dostępnym na rynku rozwiązaniem do szybkiego (i skalowalnego) budowania interfejsów.
Najczęściej wymieniane wady z którymi się spotykam, niemal w każdym przypadku wynikają albo z niewystarczającej znajomości opcji konfiguracyjnych, samego CSSa lub zasad na których oparty jest nowoczesny design.
Zatem jeżeli na ten moment podchodzisz do Tailwind z dystansem, bardzo polecam Ci przemyśleć temat raz jeszcze i dać mu jeszcze jedną szansę.
Na koniec dnia oczywiście nie jest to perfekcyjne rozwiązanie i z pewnością znajdą się sytuacje w których Tailwind się po prostu nie sprawdzi.
Mam nadzieję że ten wpis był dla Ciebie wartościowy niezależnie od tego czy znasz już Tailwind czy nie.
