Tailwind CSS v4 and Laravel 12 — what changed and why it matters
Tailwind CSS v4 is the biggest change in this framework's ecosystem since the introduction of JIT mode. No more tailwind.config.js — everything is now configured in CSS via @import "tailwindcss" and @variant directives. The engine no longer parses HTML classes — it works directly on CSS, radically speeding up builds. For a project like Cyberapis, where dark mode was manually polished through style.css, v4 means cleaner code and less selector-priority wrestling.
Meanwhile, Laravel 12 continues the evolution toward minimal boilerplate — fewer config files, more conventions. The upgrade from 11 to 12 passed without regressions (137 tests green), confirming the maturity of the framework's update process.
The biggest visual change in Cyberapis v0.12.0 is a complete frontend redesign. A new layout system based on Blade components (x-layouts.app), sticky header with backdrop-blur, dark mode toggle with Alpine.js and localStorage, redesigned hero with gradient background and blue CTA. Plus 81 architectural regression tests ensuring Laravel 12 + Filament 4 work exactly as expected.
New Features
Complete Frontend Redesign — Preline UI 4.2.0 + Tailwind CSS v4
New layout system: x-layouts.app component with shared head, sticky header, and footer — eliminating HTML duplication across 7 views. Dark mode toggle with Alpine.js + localStorage persistence + prefers-color-scheme fallback, sun/moon icons. Redesigned header (sticky backdrop-blur, blue CTA, hamburger with x-transition), hero (gradient, larger typography, blue CTA replacing green), footer (dark bg-gray-900, 3-column grid, version display). New features section on homepage (3-column grid, Heroicons inline SVG). All public views updated with dark mode support.
DESIGN.md — Complete Design System
Documentation covering color palette (light/dark), typography scale, component specs, spacing, dark mode strategy, tech stack, and file structure.
Architectural Regression Tests
81 tests across 5 files verifying Laravel 12 + Filament 4 behavior. Zero regressions after major framework upgrades.
Bot-Wall Detection (Cloudflare/LiteSpeed)
The render probe now recognizes bot-wall pages (bot_wall) — classified separately from regular HTTP errors. Optional BROWSERSHOT_PROBE_STEALTH for bypassing simple protections. Cache-bust query parameter renamed to _cb=.
Local Dev Scripts
scripts/local-dev-refresh.sh and composer run local:refresh / local:dev — migrate, cache clear, queue restart, optional background queue:work, and --start-all for serve + Vite.
Bug Fixes
Render probe — bot-wall false positives
Patterns matching cloudflare / litespeed in raw HTML caused false positives on normal WordPress/CDN pages. Detection refined and cache-bust parameter renamed to _cb=.
Render probe — false style mismatches
Default BROWSERSHOT_PROBE_WAIT_UNTIL=load and 4-second delay eliminate false style mismatches where baseline (themed colors) differed from snapshots taken before full CSS paint (showing rgb(0,0,0) values).
Admin dashboard — duplicate welcome widget
Removed redundant AccountWidget showing a second "Welcome $USER" message.
Monitoring action buttons — missing Shield permissions
"Run Monitoring Check" and "Run Render Probe" disappeared after the Filament upgrade — custom Shield permissions were re-assigned to the super_admin role.
Changes & Improvements
Laravel 11 → 12, Filament 3 → 4, Tailwind CSS 3 → 4
Zero regressions (137 tests). authorize() in Filament 4 has a new signature — mixed $abilities. Tailwind config moved to app.css via @import and @variant dark.
Browsershot 5
setUrl() now validates via FILTER_VALIDATE_URL. BrowsershotDoctor uses Browsershot::html() instead of url('about:blank').
Render probe — global Chrome lock + queue WithoutOverlapping
Prevents concurrent Chromium instances. Removed aggressive pkill after each probe. New default timeouts: domcontentloaded + 6s delay + 90s timeout.