Tailwind CSS to framework CSS w paradygmacie „utility-first”: zamiast definiować klasę `.btn-primary` gdzieś w pliku CSS, komponuje się styl bezpośrednio w HTML/JSX klasami atomowymi (`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700`). Na pierwszy rzut oka przypomina ukryty inline CSS. W praktyce to podejście dominujące w stronach budowanych na Next.js, Vue, Svelte czy nawet czystym HTML — i nasz domyślny wybór w Zaplo.
Realne (nie marketingowe) zalety: (1) mikroskopijny bundle CSS — Tailwind generuje tylko realnie używane klasy (automatyczny purge), pełna strona mieści się w 8-15 KB gzipowanym, podczas gdy Bootstrap zajmuje 25-50 KB, (2) żadnego naming hell — nie spędzają już Państwo 10 minut na nazywaniu `.product-card-image-wrapper-inner`, (3) wbudowany design system — odstępy, rozmiary, kolory są spójne z definicji, (4) doskonałe DX: autouzupełnianie w VSCode, refaktor wizualny prosto w markupie. Z Tailwind v4 (wydanym w 2025) konfiguracja jest w czystym CSS, a kompilator w Rust jest ~10x szybszy.
Klasyczne zarzuty: „HTML staje się nieczytelny” (prawda na początku, ale z komponentami React faktoryzuje się to szybko, a wtyczki Prettiera sortują klasy), „to nie jest prawdziwy CSS” (nieprawda, to kompilowany CSS atomowy). Używamy go w 100 % naszych stron na zamówienie i oprogramowania na zamówienie, często w połączeniu z shadcn/ui dla komponentów bazowych. Dla bardzo design-driven strony ze skomplikowanymi animacjami uzupełniamy Framer Motion i punktowymi CSS modules. To dziś najbardziej produktywny stack w nowoczesnym projekcie React.
Dlaczego Tailwind zamiast Bootstrap czy CSS modules
- Mikroskopijny finalny bundle: 8-15 KB gzipowane po purge'u, vs 25-50 KB Bootstrap — lepszy LCP.
- Design system z definicji: skala odstępów, paleta, breakpointy współdzielone — spójność wizualna gratis.
- Refaktor bez stłuczki: modyfikacja stylu nie grozi rozwaleniem innej strony (brak globalnej kaskady).
- Zwycięskie combo: Tailwind + Next.js + shadcn/ui = najszybszy stack do prod w 2026.
