Tailwind CSS i Framer Motion — jak strona wygląda premium
Tailwind CSS i Framer Motion to mój domyślny stack UI dla projektów Next.js. Tłumaczę dlaczego utility-first CSS i przemyślane animacje robią z przeciętnej strony coś premium.
Dlaczego Tailwind CSS zmienił moje podejście do stylowania
Przez lata pisałem CSS klasycznie — osobny plik ze stylami, klasy BEM, komponenty SCSS. Potem Bootstrap, który dawał szybki start ale generował opasłe pliki CSS z setkami nieużywanych stylów trafiającymi do przeglądarki. Tailwind CSS to utility-first — każda klasa robi dokładnie jedną rzecz. Zamiast pisać osobny plik `.header { display: flex; justify-content: space-between; }` piszę `flex justify-between` bezpośrednio w komponencie. Brzmi absurdalnie, dopóki nie spróbujesz przez tydzień.
Jak utility-first CSS zmienia codzienny workflow
W praktyce Tailwind drastycznie przyspiesza pracę. Nie przełączam się między plikiem komponentu a plikiem CSS. Nie wymyślam nazw klas dla każdego elementu. Nie martwię się o kolizje i kaskadę. Cały design system jest skonfigurowany w jednym pliku — kolory marki, typografia, spacing, breakpointy. Każdy deweloper w projekcie używa tych samych tokenów bez możliwości wynalezienia czegoś poza systemem — to wymusza spójność wizualną.
- Klasy są atomowe — każda robi dokładnie jedną rzecz: `mt-4` to margin-top: 1rem bez niespodzianek
- Design tokens w `tailwind.config.ts` — kolory marki, fonty i spacing jako jedno źródło prawdy dla całego projektu
- PurgeCSS wbudowany — do produkcji trafia tylko CSS faktycznie użyty w kodzie, często zaledwie 5–15 KB
- Responsywność przez prefiksy: `md:flex lg:grid` — mobile-first bez ręcznego pisania media queries
- Dark mode przez prefiks `dark:bg-zinc-900` — tryb ciemny bez dodatkowej logiki JavaScript
Framer Motion — animacje które nie niszczą wydajności
Animacje na stronach to mój ulubiony temat i jednocześnie źródło największych błędów, które widzę na stronach klientów przychodzących do mnie z prośbą o optymalizację. Zła animacja — zbyt szybka, zbyt wolna, animująca złe właściwości CSS jak `width` albo `top` zamiast `transform` — potrafi spowolnić stronę i wywołać ból głowy u użytkownika. Framer Motion to biblioteka React, która robi animacje poprawnie: zawsze na GPU, zawsze przez `transform` i `opacity`, zawsze z poszanowaniem `prefers-reduced-motion`.
- Animacje wejścia: `initial={{ opacity: 0 }} animate={{ opacity: 1 }}` — zero dodatkowej konfiguracji
- AnimatePresence — animacje wyjścia elementów usuwanych z DOM, niemożliwe w czystym CSS
- useScroll + useTransform — efekty parallax zależne od pozycji scrolla bez event listenerów blokujących wątek
- Layout animations — automatyczne animowanie zmian layoutu, np. płynne rozwinięcie sekcji FAQ
- Drag gestures — przeciągalne karty i karuzele bez potrzeby instalowania dodatkowych bibliotek
Co to daje użytkownikowi w praktyce
Strona z dobrze zaprojektowanymi animacjami Framer Motion robi wrażenie premium bez wysiłku po stronie użytkownika. Elementy wchodzą płynnie w widok zamiast wyskakiwać. Przejścia między podstronami są płynne i pozbawione migotania. Hover states reagują natychmiastowo i dają subtelny feedback. Użytkownik nie widzi biblioteki — widzi dopracowanie i profesjonalizm. I właśnie o to chodzi: animacja powinna wspomagać UX, a nie być popisem technicznym.
Czy to nie spowalnia strony — kwestia wydajności
To najczęstsze pytanie. Tailwind w produkcji generuje plik CSS o rozmiarze 5–15 KB — wielokrotnie mniej niż Bootstrap (~140 KB) czy pełne pliki SCSS z dużych projektów. Framer Motion waży około 35 KB gzipped, ale ładowany jest leniwie i nie blokuje pierwszego renderowania strony. Na własnej stronie NIEWART.PL, gdzie intensywnie używam obu technologii, PageSpeed Mobile wynosi powyżej 90. Dobre narzędzia nie psują wydajności — złe użycie narzędzi ją psuje.
Tailwind i Framer Motion to mój domyślny stack UI dla wszystkich projektów Next.js. Nie dlatego że są aktualnie modne — dlatego że po latach pracy z nimi wiem, że dostarczają przewidywalny, szybki i estetyczny wynik w każdym projekcie. I klienci to czują od pierwszego wejścia na stronę, nawet nie wiedząc co stoi za kulisami.
