Modal backdrops render as opaque grey — Tailwind v3 opacity utilities not supported in v4 #108

New issue

Closed

opened 2026-07-31 21:46:18 +02:00 by myrmidex · 0 comments

myrmidex commented

2026-07-31 21:46:18 +02:00

Owner

Summary

Clicking Add Channel (or Add Feed) covers the viewport with a solid grey sheet instead of showing the modal. The modal itself renders and works correctly — it is hidden behind an opaque backdrop.

Root cause

The modal backdrops use bg-opacity-75, a Tailwind v3 utility that was removed in v4. The project runs Tailwind 4.1.18 (package.json, resources/css/app.css uses @import 'tailwindcss').

Tailwind emits nothing for unrecognised classes, so the backdrop keeps fixed inset-0 bg-gray-500 at full opacity — a solid grey layer over the page.

In v4, opacity is a slash modifier on the colour: bg-gray-500/75.

The correct syntax is already used elsewhere — resources/views/layouts/app.blade.php:29 has bg-gray-600/75, which is why the mobile sidebar overlay works while the modals do not.

Affected occurrences

Backdrops (bg-gray-500 bg-opacity-75 → bg-gray-500/75):

resources/views/livewire/feeds.blade.php:108
resources/views/livewire/channels.blade.php:130
resources/views/livewire/channels.blade.php:184
resources/views/livewire/routes.blade.php:149
resources/views/livewire/routes.blade.php:231

Rings (ring-black ring-opacity-5 → ring-black/5):

resources/views/livewire/notification-bell.blade.php:26
resources/views/components/dropdown.blade.php:31

Secondary issue — stale asset build

The committed build in public/build/ dates to 2026-02-25, months before the modals were added. sm:max-w-lg is also missing from the compiled CSS as a result.

The Dockerfile does run npm run build, so production images compile fresh CSS — but the fix still requires a rebuilt image to ship, and the local build needs regenerating.

Why this escaped testing

The 12 ChannelsTest Livewire tests all pass — they assert rendered HTML, never CSS.
PHPStan and Pint do not inspect Tailwind class names.
No server-side error occurs: nothing appears in laravel.log because the backend behaves correctly.

Acceptance criteria

All 7 v3 opacity utilities migrated to v4 slash syntax
Add Channel modal opens and is visible and interactive
Add Feed and Routes create/edit modals verified
Notification bell and dropdown rings render correctly
Assets rebuilt; existing test suite still green
Repo swept for other v3-only utilities remaining from the v4 migration

Notes

Found while debugging against v1.3.2. An unrelated APP_URL misconfiguration on the production host (pointing at 192.168.178.152 instead of 192.168.178.52) was discovered and fixed during the same session — not related to this bug.

## Summary Clicking **Add Channel** (or **Add Feed**) covers the viewport with a solid grey sheet instead of showing the modal. The modal itself renders and works correctly — it is hidden behind an opaque backdrop. ## Root cause The modal backdrops use `bg-opacity-75`, a **Tailwind v3 utility that was removed in v4**. The project runs Tailwind **4.1.18** (`package.json`, `resources/css/app.css` uses `@import 'tailwindcss'`). Tailwind emits nothing for unrecognised classes, so the backdrop keeps `fixed inset-0 bg-gray-500` at **full opacity** — a solid grey layer over the page. In v4, opacity is a slash modifier on the colour: `bg-gray-500/75`. The correct syntax is already used elsewhere — `resources/views/layouts/app.blade.php:29` has `bg-gray-600/75`, which is why the mobile sidebar overlay works while the modals do not. ## Affected occurrences Backdrops (`bg-gray-500 bg-opacity-75` → `bg-gray-500/75`): - `resources/views/livewire/feeds.blade.php:108` - `resources/views/livewire/channels.blade.php:130` - `resources/views/livewire/channels.blade.php:184` - `resources/views/livewire/routes.blade.php:149` - `resources/views/livewire/routes.blade.php:231` Rings (`ring-black ring-opacity-5` → `ring-black/5`): - `resources/views/livewire/notification-bell.blade.php:26` - `resources/views/components/dropdown.blade.php:31` ## Secondary issue — stale asset build The committed build in `public/build/` dates to **2026-02-25**, months before the modals were added. `sm:max-w-lg` is also missing from the compiled CSS as a result. The Dockerfile does run `npm run build`, so production images compile fresh CSS — but the fix still requires a rebuilt image to ship, and the local build needs regenerating. ## Why this escaped testing - The 12 `ChannelsTest` Livewire tests all pass — they assert rendered HTML, never CSS. - PHPStan and Pint do not inspect Tailwind class names. - No server-side error occurs: nothing appears in `laravel.log` because the backend behaves correctly. ## Acceptance criteria - [ ] All 7 v3 opacity utilities migrated to v4 slash syntax - [ ] Add Channel modal opens and is visible and interactive - [ ] Add Feed and Routes create/edit modals verified - [ ] Notification bell and dropdown rings render correctly - [ ] Assets rebuilt; existing test suite still green - [ ] Repo swept for other v3-only utilities remaining from the v4 migration ## Notes Found while debugging against v1.3.2. An unrelated `APP_URL` misconfiguration on the production host (pointing at `192.168.178.152` instead of `192.168.178.52`) was discovered and fixed during the same session — not related to this bug.