Integrating Custom Animated Background with Themes in FilamentPHP Views

[rmclain]

I've encountered an issue while trying to implement a custom animated background in one of my FilamentPHP custom resource views and I am seeking help on how to properly integrate it across all themes. The goal is to add a gradient background to a specific view using the following HTML and CSS:

<x-filament::page>
<div class="w-full h-screen bg-gradient-to-r from-indigo-500 via-blue-500 to-pink-500 background-animate"></div>
@push('styles')
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        .background-animate {
            background-size: 400%;
            animation: AnimationName 3s ease infinite;
        }

        @keyframes AnimationName {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }
    </style>
@endpush

The animation works as intended when I manually include TailwindCSS via a <script> tag within the @Push('scripts') directive:

@push('scripts')
<script src="https://cdn.tailwindcss.com"></script>
@endpush

However, this approach isn't ideal as it forces me to include TailwindCSS again, potentially leading to issues. I'm looking for a way to integrate these styles seamlessly into the themes add-on, ensuring that the animated background applies to all views without needing to include TailwindCSS manually each time.

Has anyone faced a similar challenge or can offer advice on how to achieve this? Any insights on how to make these styles part of the global theme or a more efficient method to apply custom animations across Filament views would be greatly appreciated.

[rmclain]

Ah, I found it, it turned out I had two tailwind.css.config files one living at the root and one living at the resources/css/filament/company/tailwind.config.js folder from a different plugin that was controlling the active panel.