notification css flicker
Hi i am using the notifications on the frontend, its working well, but a flicker of broken css happens before the notifications is show. Is there something I can do to mitigate this? Thanks
2 Replies
If it's frontend and not the admin panel, it'll be your frontend css/js clashing and will need debugging
@toeknee this is my main app.layout
This is main tailwind config
i haven't got any custom JS, what do you think could be causing the issue? Thanks
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet"/>
<!-- Scripts -->
@livewire('notifications')
@livewireStyles
@filamentStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
@include('components.thillow-navigation')
<!-- Page Heading -->
@isset($header)
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endisset
<!-- Page Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{{ $slot }}
</main>
</div>
@livewireScripts
@filamentScripts
</body>
</html>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet"/>
<!-- Scripts -->
@livewire('notifications')
@livewireStyles
@filamentStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
@include('components.thillow-navigation')
<!-- Page Heading -->
@isset($header)
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endisset
<!-- Page Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{{ $slot }}
</main>
</div>
@livewireScripts
@filamentScripts
</body>
</html>
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'
import typography from '@tailwindcss/typography';
/** @type {import('tailwindcss').Config} */
export default {
presets: [preset],
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/views/components/*.blade.php',
'./app/Filament/**/*.php',
'./resources/views/filament/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
],
darkMode: 'class', // Enable dark mode
theme: {
extend: {
fontSize: {
base: ['15px', '26px'],
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [forms, typography],
};
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'
import typography from '@tailwindcss/typography';
/** @type {import('tailwindcss').Config} */
export default {
presets: [preset],
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/views/components/*.blade.php',
'./app/Filament/**/*.php',
'./resources/views/filament/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
],
darkMode: 'class', // Enable dark mode
theme: {
extend: {
fontSize: {
base: ['15px', '26px'],
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [forms, typography],
};