Tailwind CSS v4 i Laravel 12 — co się zmieniło i dlaczego to ważne
Tailwind CSS v4 to największa zmiana w ekosystemie tego frameworka od czasu wprowadzenia JIT. Koniec z tailwind.config.js — teraz wszystko konfiguruje się w CSS przez @import "tailwindcss" i dyrektywy @variant. Silnik nie parsuje już klas z HTML — działa bezpośrednio na CSS, co radykalnie przyspiesza budowanie. Dla projektu takiego jak Cyberapis, gdzie dark mode był ręcznie doprowadzany do porządku przez style.css, v4 oznacza czystszy kod i mniej walki z priorytetem selektorów.
Równocześnie Laravel 12 kontynuuje ewolucję w stronę minimalnego boilerplate — mniej plików konfiguracyjnych, więcej konwencji. Upgrade z 11 do 12 przeszedł bez regresji (137 testów na zielono), co potwierdza dojrzałość procesu aktualizacji frameworka.
Największą zmianą wizualną w Cyberapis v0.12.0 jest pełny redesign frontendu. Nowy system layoutu oparty na komponentach Blade (x-layouts.app), sticky header z backdrop-blur, dark mode toggle z Alpine.js i localStorage, przeprojektowany hero z gradientowym tłem i niebieskim CTA. Do tego 81 testów regresji architektonicznej, które pilnują, żeby Laravel 12 + Filament 4 działały dokładnie tak jak powinny.
Nowe funkcjonalności
Pełny redesign frontendu — Preline UI 4.2.0 + Tailwind CSS v4
Nowy system layoutu: komponent x-layouts.app z współdzielonym head, sticky headerem i stopką. Dark mode toggle z Alpine.js + localStorage persistence + prefers-color-scheme fallback. Nowy header (sticky backdrop-blur, niebieski CTA, hamburger z x-transition), hero (gradient, większa typografia), footer (3 kolumny, wersja). Sekcja "features" na stronie głównej z ikonami SVG Heroicons. Wszystkie publiczne widoki zaktualizowane o dark mode.
DESIGN.md — pełny system projektowy
Dokument zawiera paletę kolorów (light/dark), skalę typograficzną, specyfikacje komponentów, spacing, strategię dark mode, stack technologiczny i strukturę plików.
Testy regresji architektonicznej
81 testów w 5 plikach weryfikujących poprawność działania Laravel 12 + Filament 4. Zero regresji po głównych upgrade'ach frameworków.
Wykrywanie bot-wall (Cloudflare/LiteSpeed)
Render probe rozpoznaje teraz strony typu bot-wall (bot_wall) — osobna klasyfikacja od zwykłych błędów HTTP. Opcjonalny BROWSERSHOT_PROBE_STEALTH do omijania prostych zabezpieczeń. Cache-bust query param zmieniony na _cb=.
Lokalne skrypty developerskie
scripts/local-dev-refresh.sh i composer run local:refresh / local:dev — migracje, czyszczenie cache, restart kolejki, opcjonalne tło queue:work i --start-all dla serve + Vite.
Naprawione błędy
Render probe — fałszywe wykrycia bot-wall
Wzorce cloudflare / litespeed w surowym HTML dawały fałszywe pozytywy na normalnych stronach WordPress/CDN. Doprecyzowano detekcję i zmieniono nazwę parametru cache-bust na _cb=.
Render probe — fałszywe style mismatch
Domyślny BROWSERSHOT_PROBE_WAIT_UNTIL=load i 4-sekundowe opóźnienie eliminują fałszywe niezgodności stylów, gdzie baseline (themed colors) różnił się od snapshota zrobionego przed pełnym załadowaniem CSS (wartości rgb(0,0,0)).
Admin dashboard — duplikat widgetu powitalnego
Usunięto nadmiarowy AccountWidget pokazujący drugi komunikat "Witaj $USER".
Przyciski akcji w monitoringu — brakujące uprawnienia Shield
"Uruchom monitoring check" i "Uruchom render probe" zniknęły po upgrade Filament — niestandardowe uprawnienia Shield zostały ponownie przypisane do roli super_admin.
Zmiany i ulepszenia
Upgrade Laravel 11 → 12, Filament 3 → 4, Tailwind CSS 3 → 4
Zero regresji (137 testów). authorize() w Filament 4 ma nową sygnaturę — mixed $abilities. Konfiguracja Tailwind przeniesiona do app.css przez @import i @variant dark.
Browsershot 5
setUrl() waliduje teraz przez FILTER_VALIDATE_URL. BrowsershotDoctor używa Browsershot::html() zamiast url('about:blank').
Render probe — globalny Chrome lock + queue WithoutOverlapping
Zapobiega równoczesnemu uruchamianiu wielu instancji Chromium. Usunięto agresywne pkill po każdym probe. Nowe domyślne timeouty: domcontentloaded + 6s delay + 90s timeout.