CSS to Tailwind. Ale dlaczego?

Stylowanie interfejsu każdego nowego projektu utożsamiam z Tailwind CSS. Patrząc na wyniki State of CSS 2023, nie tylko ja tak uważam. Z drugiej strony ogromna jest także grupa osób, które naukę tego framework'a mają dopiero w planach. W ostatnim wydaniu naszego newslettera swoją perspektywą na temat Tailwind podzielił się Daniel Noworyta. A w tym, dodam coś od siebie.

Balansowanie na granicy jakości i zwinności

Pisanie kodu CSS jest banalnie proste. Jednak stylowanie projektu w sposób, który pozwala na utrzymanie spójności elementów na przestrzeni całego projektu bez starannego, żmudnego wprowadzania zmian w wielu miejscach, wymaga już ogromnego doświadczenia. Zastanawiające jest zatem, dlaczego pomysł dopisywania kolejnych klas do elementów HTML miałby się tutaj sprawdzić i że z jakiegoś powodu, właśnie tak się dzieje.

Wystarczy sobie wyobrazić, że przycisków takich, jak ten powyższy mamy kilkadziesiąt. Część z nich będzie różnić jeszcze rozmiar czy kolor. Wydaje się, że znacznie wygodniejsze byłoby przypisanie pojedynczych klas w stylu "btn btn-primary btn-lg". Jest to zresztą podejście pochodzące bezpośrednio z wciąż obecnego w wielu projektach framework'a Bootstrap CSS.
Gotowe komponenty, posiadające z góry zdefiniowane style, które jesteśmy w stanie modyfikować poprzez dodatkowe klasy, już na pierwszy rzut oka wydaje się niezwykle wygodne, skalowalne i ... bardzo nie elastczyne. Im bardziej złożony komponent, tym trudniejsze jest nadpisanie wybranych właściwości. Bardzo szybko prowadzi to do konieczności pisania kodu CSS ręcznie lub, co gorsza, próby nadpisania domyślnych klas, co znowu prowadzi do utraty kontroli nad spójnością projektu.

Rozbijając poszczególne cechy na (niemal) pojedyncze klasy (tzw. utility class), z jednej strony musimy dodać ich więcej, a z drugiej mamy niemal pełną kontrolę nad tym, która z nich ma być obecna w danym elemencie, a która nie. Różnica w podejściu Tailwind CSS i Bootstrap jest bardzo wyraźna i widać ją przy porównaniu wcześniejszego i poniższego zrzutu ekranu.

Gdybym miał wskazać jedną cechę dobrego kodu CSS, powiedziałbym, że jest nią spójność widoczna w drobnych detalach na przestrzeni całego interfejsu. Przez drobne detale, mam na myśli tempo animacji, odcienie kolorów czy długość marginesów. W przypadku pisania kodu CSS ręcznie lub przy próbie nadpisywania domyślnych klas frameworków takich jak Bootstrap, bardzo łatwo można doprowadzić do rozbieżności. Ich wykrycie i naprawienie jest tak czasochłonne, a jednocześnie wydaje się mieć tak niski priorytet, że zwykle musi to czekać do kolejnego, pełnego przeprojektowania interfejsu.
W przypadku Tailwind spójność utrzymywana jest w bardzo naturalny sposób. Przykładowo klasa px-4 oznacza margines wewnętrzny (padding) na osi horyzontalnej (lewo / prawo) o wartości 0.5rem. Nie ma tutaj miejsca na jakiekolwiek nieścisłości. Podobnie wygląda to z innymi właściwościami, np. paletą kolorystyczną czy elementami typografii. Naturalnie w razie potrzeby domyślne wartości klas możemy łatwo zmodyfikować globalnie, poprzez plik konfiguracyjny.
Koncepcja utility-class posiada jeszcze jedną, niezwykle ważną zaletę związaną z wydajnością. Tailwind CSS oferuje narzędzia, które skanują nasz kod w poszukiwaniu wykorzystywanych klas, i dołącza do pliku wynikowego tylko te, które są wymagane.

Ciężar HTML

Nietrudno zauważyć, że w Tailwind CSS ciężar położony jest na kodzie HTML. W przypadku niektórych projektów nie będzie potrzeby dołączania jakichkolwiek dodatkowych plików zawierających style CSS. Szybko może się okazać, że korzyści wynikające ze stylowania z pomocą klas, przestają być widoczne i wprost stają się uciążliwe.
Jeżeli jednak spojrzymy na to przez pryzmat komponentów obecnych w frontendowych frameworkach takich jak React, Svelte czy Vue, to oczywiste stanie się, że utility-class perfekcyjnie wpisują się w ich charakter.

Pomimo zastosowania komponentów może okazać się jednak, że lista klas opisujących wybrane elementy jest bardzo długa. Tailwind oferuje możliwość ich grupowania poprzez dyrektywę @apply, jednak nie jest to rekomendowane. Faktycznie kod HTML w którym obecny jest Tailwind może wydawać się na swój sposób nieczytelny i w pojedynczych sytuacjach grupowanie klas jest uzasadnione, jednak nie warto tego nadużywać, ponieważ w dłuższej perspektywie przynosi to więcej problemów, niż korzyści.

Design System i dostosowanie do swoich potrzeb

W obszarze designu i front-endu funkcjonują tzw. Design Systemy, z pomocą których organizujemy informacje na temat interfejsu oraz ogólnego tonu całej marki. W połączeniu z tym podejściem, Tailwind również wypada wprost genialnie, ponieważ podąża za obecnymi w branży standardami, a jednocześnie daje praktycznie swobodną możliwość dopasowania klas na poziomie globalnych ustawień projektu.
Poniżej widoczny jest fragment jednego z moich projektów, opisujący przyciski występujące w interfejsie aplikacji. Tak zdefiniowaną strukturę mogę przełożyć bezpośrednio na Tailwind CSS oraz komponenty (w moim przypadku) Svelte.

Nawet jeśli Tailwind nie będzie posiadać np. konkretnej palety kolorystycznej, to nic nie stoi na przeszkodzie, aby zdefiniować ją bezpośrednio w ustawieniach pliku tailwind.config.js. Widzimy w ten sposób, że Tailwind jako framework CSS swoim podejściem niemal idealnie wpisuje się w obecne trendy i techniki pracy, zarówno w obszarze designu, jak i front-endu.
Poza dopasowywaniem Tailwind CSS do swoich potrzeb, niemal w każdym projekcie ułatwiam sobie pracę z nim, poprzez zastosowanie gotowych komponentów z Tailwind UI. Co prawda w ich przypadku zwykle konieczne jest dopasowanie do naszych potrzeb, jednak stanowią bardzo dobrą podstawę, przez co unikamy projektowania "od zera", co w niektórych sytuacjach jest bardzo pomocne.

Nauka Tailwind CSS

Sam Tailwind CSS nauczyłem się niesamowicie szybko, i to jeszcze na bardzo wczesnym etapie rozwoju tego projektu. Dziś framework ten nie tylko się rozwinął, ale przede wszystkim, zrobił to w bardzo dobrym kierunku, zdobywając w ten sposób popularność i serca wielu developerów i developerek.
Jeżeli jesteś na etapie eksploracji możliwości Tailwind CSS, lub dopiero masz w planie naukę, to dziś na Ahoy! rozpoczęliśmy Sprint Technologiczny, czyli 3-tygodniowy kurs realizowany w ramach naszej społeczności i wciąż można do niego dołączyć.

Szczegółową agendę oraz najważniejsze informacje na temat Sprintu znajdziesz na stronie: https://ahoy.eduweb.pl/sprinty/zbuduj-wlasne-portfolio-z-tailwind-css
Serdecznie zapraszam do wzięcia udziału. Sam również tam jestem 🙂

• Balans jakości i zwinności
• Ciężar klas HTML
• Gotowe komponenty
• Design Systemy i dostosowanie stylów