• Version Matrix
• Filament v4 Notes
  • Known Issue: Focus Ring with OKLCH Colors
• Filament v5 Notes
• Migrating from v4 to v5
• Tailwind CSS 4 Requirement
• Browser Support

Version Matrix#

The Laravel 11+ requirement comes from Filament itself, not from aura-filament directly.

Filament v4 Notes#

Known Issue: Focus Ring with OKLCH Colors#

Filament v4 defines --primary-* CSS variables as OKLCH colors inline in the HTML. Aura Filament uses these variables inside color-mix():

--aura-focus-ring: 0 0 0 3px color-mix(in oklch, var(--primary-500) 35%, transparent);

In some browser contexts, color-mix() with nested OKLCH variables doesn't resolve correctly, making focus rings invisible on form inputs.

Workaround: Add this to your panel's theme.css, after the aura-filament import:

.fi-body .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35),
                0 0 0 1px rgba(37, 99, 235, 0.8) !important;
}

Replace 37, 99, 235 (blue) with your primary color's RGB equivalent. For example:

• Violet: 124, 58, 237
• Emerald: 16, 185, 129
• Amber: 245, 158, 11

Filament v5 Notes#

Aura Filament is fully compatible with Filament v5. The OKLCH focus ring issue from v4 is resolved — color-mix() works correctly with Filament v5's color system.

No workarounds or special configuration needed.

Migrating from v4 to v5#

1. Update Filament in composer.json: "filament/filament": "^5.0"
2. Run composer update
3. Remove the focus ring workaround CSS from your theme.css (if applied)
4. Rebuild assets: npm run build

No changes needed to the AuraFilamentPlugin configuration — the API is identical across v4 and v5.

Tailwind CSS 4 Requirement#

Aura Filament requires Tailwind CSS v4 because:

• CSS @import syntax: The stylesheet uses native CSS imports (@import './base/presets.css'), which is the standard in Tailwind v4's PostCSS-free pipeline
• CSS custom properties: The preset system relies heavily on CSS custom properties with modern color functions (color-mix(), OKLCH)
• No @apply directives: Aura Filament uses pure CSS, not Tailwind utility classes

Tailwind CSS v3 projects using the @apply-based build pipeline are not supported.

Browser Support#

The Glass and Midnight presets use backdrop-filter for blur effects. Support:

Graceful degradation: On browsers without backdrop-filter support, surfaces fall back to their solid background colors. The layout and functionality remain fully intact — only the frosted glass visual effect is lost.

The Corporate and Warm presets do not use backdrop-filter at all, so they work on any modern browser.