F
Filamentā€¢2mo ago
Ticaga Ltd

Notification CSS isn't loading for Filament 4 on my Laravel 12?

What I am trying to do: I'm trying to get the Filament 4 Notifications working in my standalone Laravel 12 app, the notifications work, however they have no CSS and wreck the layout. This worked fine when it was Laravel 11 and Filament 3, so I'm really confused. What I did: I've added Filament 4 to the composer by using the individual components, and added the code to my model. My issue/the error: Attached picture. it works but there's no CSS for it šŸ™ Code: 
composer require filament/notifications:"^4.0"
composer require filament/notifications:"^4.0"
{
    "$schema": "https://getcomposer.org/schema.json",
    "name": "laravel/livewire-starter-kit",
    "type": "project",
    "description": "The official Laravel starter kit for Livewire.",
    "keywords": ["laravel", "framework"],
    "license": "MIT",
    "require": {
        "php": "^8.2",
        "beyondcode/laravel-mailbox": "^5.0",
        "filament/filament": "^4.0",
        "filament/notifications": "^4.0"
... Continues ...
{
    "$schema": "https://getcomposer.org/schema.json",
    "name": "laravel/livewire-starter-kit",
    "type": "project",
    "description": "The official Laravel starter kit for Livewire.",
    "keywords": ["laravel", "framework"],
    "license": "MIT",
    "require": {
        "php": "^8.2",
        "beyondcode/laravel-mailbox": "^5.0",
        "filament/filament": "^4.0",
        "filament/notifications": "^4.0"
... Continues ...
I added the use in my Livewire Model: 
use Filament\Notifications\Notification;
use Filament\Notifications\Notification;
And added the code: 
Notification::make()
            ->title('Update successfully')
            ->success()
            ->body('The department has been updated.')
            ->color('success') 
            ->send();
Notification::make()
            ->title('Update successfully')
            ->success()
            ->body('The department has been updated.')
            ->color('success') 
            ->send();
app.css: 
@source '../../vendor/filament/notifications/resources/views/*.blade.php';
@source '../../vendor/filament/notifications/resources/views/*.blade.php';
Thank you in advance for any help to solve this as I've even tried ChatGPT to try and work out what I have missed, but nothing works and I know it's not Filament as no0one else is having issues so it's defo my problem.
No description
Solution:
You also need @import '../../vendor/filament/support/resources/css/index.css'; before the notifications import.
Jump to solution
4 Replies
Dennis Koch
Dennis Kochā€¢2mo ago
You upgraded to Tailwind v4? Did you add @import '../../vendor/filament/notifications/resources/css/index.css';?
Ticaga Ltd
Ticaga LtdOPā€¢2mo ago
Thank you for getting back to me, I did upgrade to TailwindCSS 4 beforehand. When I add this to app.css I get this: 
root@localhost:/var/www/ticaga# npm run build

> build
> vite build

vite v7.1.10 building for production...
/*! šŸŒ¼ daisyUI 5.0.48 */
āœ“ 53 modules transformed.
āœ— Build failed in 3.05s
error during build:
[@tailwindcss/vite:generate:build] Cannot apply unknown utility class `before:bg-primary-600`
file: /var/www/ticaga/resources/css/app.css
    at onInvalidCandidate (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:18:1509)
    at pe (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:13:29803)
    at file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:18:373
    at F (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:3:1656)
    at F (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:3:1939)
    at Oe (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:18:172)
    at ti (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:35:780)
    at async mn (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:35:1123)
    at async Ca (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:35:1898)
    at async $a (file:///var/www/ticaga/node_modules/@tailwindcss/node/dist/index.mjs:10:3433)
root@localhost:/var/www/ticaga# npm run build

> build
> vite build

vite v7.1.10 building for production...
/*! šŸŒ¼ daisyUI 5.0.48 */
āœ“ 53 modules transformed.
āœ— Build failed in 3.05s
error during build:
[@tailwindcss/vite:generate:build] Cannot apply unknown utility class `before:bg-primary-600`
file: /var/www/ticaga/resources/css/app.css
    at onInvalidCandidate (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:18:1509)
    at pe (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:13:29803)
    at file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:18:373
    at F (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:3:1656)
    at F (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:3:1939)
    at Oe (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:18:172)
    at ti (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:35:780)
    at async mn (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:35:1123)
    at async Ca (file:///var/www/ticaga/node_modules/tailwindcss/dist/chunk-4WXWQT6Y.mjs:35:1898)
    at async $a (file:///var/www/ticaga/node_modules/@tailwindcss/node/dist/index.mjs:10:3433)
When that line is not in the file: 
root@localhost:/var/www/ticaga# npm run build

> build
> vite build

vite v7.1.10 building for production...
transforming (54) node_modules/flowbite/lib/esm/dom/instances.js/*! šŸŒ¼ daisyUI 5.0.48 */
āœ“ 113 modules transformed.
public/build/manifest.json              0.31 kB ā”‚ gzip:  0.17 kB
public/build/assets/app-B9E6m_Vw.css  359.84 kB ā”‚ gzip: 51.23 kB
public/build/assets/app-wLUrqN_D.js   204.46 kB ā”‚ gzip: 51.55 kB
āœ“ built in 17.73s
root@localhost:/var/www/ticaga# npm run build

> build
> vite build

vite v7.1.10 building for production...
transforming (54) node_modules/flowbite/lib/esm/dom/instances.js/*! šŸŒ¼ daisyUI 5.0.48 */
āœ“ 113 modules transformed.
public/build/manifest.json              0.31 kB ā”‚ gzip:  0.17 kB
public/build/assets/app-B9E6m_Vw.css  359.84 kB ā”‚ gzip: 51.23 kB
public/build/assets/app-wLUrqN_D.js   204.46 kB ā”‚ gzip: 51.55 kB
āœ“ built in 17.73s
Solution
awcodes
awcodesā€¢2mo ago
You also need @import '../../vendor/filament/support/resources/css/index.css'; before the notifications import.
Ticaga Ltd
Ticaga LtdOPā€¢2mo ago
thank you both so much ā¤ļø

Did you find this page helpful?