Podejście utility-first w Tailwind 4.0

W artykule, który dla was przygotowaliśmy, przyjrzymy się dokładniej idei, którą daje nam Tailwind, czyli utility-first. Wskażemy jej zalety oraz pokażemy praktyczne zastosowanie. Jak również dowiemy się, dlaczego Tailwind CSS stał się wyborem numer jeden dla wielu deweloperów.

Czym jest podejście utility-first?

Utility-first CSS to architektoniczne podejście CSS, oznacza podejście do projektowania z użyciem pojedynczych klas, które odpowiadają pojedynczym właściwością CSS. Dobrymi przykładami takich klas są kolory, wielkości czcionki, układy flexbox i wiele więcej.

Przykład I:

Idealnym przykładem jest tag “<button class=”button”></button>” z klasą “.button”, który bez tego podejścia wymagało od nas ostylowanie go przy użyciu arkusza CSS. W podejściu utility-first użyjemy do tego kilku klas z pojedynczymi wartościami.

<button class="bg-blue-500 text-gray py-2 px-4 rounded transition-all ease-in-out 
delay-100 hover:bg-black hover:text-white">
   Przykładowy przycisk
</button>

Kluczowe cechy utility-first

1. Szybszy rozwój projektów

Dzięki gotowym klasom narzędziowym nie trzeba pisać dodatkowego kodu CSS. Stylowanie naszej aplikacji odbywa się bezpośrednio w kodzie HTML, dodając pojedyncze klasy. Podejście to ogranicza czas przeszukiwania naszego projektu, w celu znalezienia i edycji danego komponentu.

2. Spójność projektu

Utility-first narzuca korzystanie ze zdefiniowanych wartości, takich jak np.: skala odstępów czy kolorów. Dzięki czemu projekt staje się spójny wizualnie, a kod jest bardziej przewidywalny.

3. Łatwiejsza skalowalność

Dzięki standaryzacji stylów, podejście utility-first pozwala na łatwe skalowanie projektu z czasem, gdy on się rozrasta. Nowe elementy strony są dodawane bez konieczności pisania rozbudowanych klas CSS.

4. Wprowadzanie zmian jest bezpieczniejsze

Plik CSS jest globalny i nigdy nie wiesz, czy w trakcie wprowadzania zmian coś się zepsuje. Klasy w HTML-u są lokalne, więc możesz je zmieniać bez obaw, że coś innego się zepsuje.

5. Brak konfliktów w trakcie tworzenia nazw

Już na samym początku korzystania z utility-first zauważysz, że przy dużym projekcie przestaniesz mieć problemy z nazewnictwem klas, które jest dość problematyczne.

Struktura Utility-First w Tailwind CSS

Tailwind CSS oferuje klasy utility, które odpowiadają za niemal każdą właściwość CSS. Oto najważniejsze grupy:

1. Kolory i tła

• text-{color} - ustawia kolor tekstu
• bg-{color} - ustawia kolor tła
• border-{color] - ustawia kolor obramowania

Przykład:

<p class="text-gray-700 bg-yellow-200 border-red-500">
   Przykładowy tekst
</p>

2. Odstępy

• m-{size} - ustawienia marginesu zewnętrznego
• p-{size} - ustawienia marginesu wewnętrznego

Przykład:

<div class="m-2 px-4">
   <p>Lorem, ipsum.</p>
   <p>Lorem ipsum dolor sit amet.</p>
</div>

3. Układ

• gride, flex, block - definiują sposób rozmieszcza elementów
• justify-{position} - wyrównanie w osi poziomej
• items-{position} - wyrównanie w osi pionowej

Przykład:

<div class="flex justify-center items-center h-screen">
   <h2>Wyśrodkowany tekst</h2>
</div>

4. Rozmiary

• w-{size}, h-{size} - szerokość i wysokość
• max-w-{size}, max-h-{size} - maksymalny rozmiar

<img
   class="w-32 h-32 object-cover"
   src="/wakacyjny-rekin.jpg"
   alt="Rekin w basenie pijący drinka z palemką – relaksująca scena"
   title="Rekin w basenie z drinkiem – idealny obraz relaksu i egzotyki"
/>

Czy podejście utility-first jest dla każdego?

Zalety:

• Dobrze sprawdza się w projektach, które wymagają od nas szybkiego prototypowania
• Świetnie sprawdza się w aplikacjach z dynamicznie generowanym HTML-em (np. w React, Vue czy Angular).
• Zmniejsza znacząco ilość kodu CSS, co jest potrzebne w zachowaniu odpowiedniego performance naszej aplikacji

Wyzwania:

• Przy bardziej rozbudowanych komponentach nasz kod powstały w HTML, zaczyna się rozrastać, co może prowadzić do zmniejszenia czytelność, przez co wielu deweloperów może nazywać go “zaśmieconym”

Podsumowanie

Podejście opisane w naszym wpisie idealnie pokazuje, że utility-first jest rewolucyjne. Swoimi założeniami zwiększa efektywność i szybkość stylowania aplikacji, zachowując przy tym spójność wizualną w projekcie. Niezależnie od tego czy projekt, nad którym pracujemy, jest duży czy mały to podejście sprawia, że praca staje jeszcze bardziej przyjemna. Jeśli jeszcze nie próbowałeś wprowadzić tego podejścia do swojego projektu, zachęcam Cię do spróbowania. Zapraszam Cię również do przeczytania naszego wpisu o najnowszej wersji Tailwind CSS 4.0, który idealnie pokazuje, jak to podejście wygląda w akcji.