F
Filament•3w ago
Jpac14

Using primary tailwind colours in blade view and render hook

Hi All, I am trying to use the primary css colour in my blade view within a render hook see code below admin-panel-badge.blade.php 
<span 
  class="inline-flex items-center rounded-md bg-primary-50 px-2 py-1 text-xs font-medium text-primary-700 ring-1 ring-primary-700/10 ring-inset"
>
  Badge
</span>
<span 
  class="inline-flex items-center rounded-md bg-primary-50 px-2 py-1 text-xs font-medium text-primary-700 ring-1 ring-primary-700/10 ring-inset"
>
  Badge
</span>
AdminPanelProvider.php
8 Replies
Jpac14
Jpac14OP•3w ago
class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->id('admin')
            ->path('admin')
            ->login()
            ->brandLogo(asset('images/logo.png'))
            ->favicon(asset('favicon.ico'))
            ->viteTheme('resources/css/app.css')
            ->sidebarCollapsibleOnDesktop()
            ->colors([
                'primary' => Color::Indigo,
            ])
            ->discoverResources(in: app_path('Filament/Admin/Resources'), for: 'App\\Filament\\Admin\\Resources')
            ->discoverPages(in: app_path('Filament/Admin/Pages'), for: 'App\\Filament\\Admin\\Pages')
            ->pages([
                Pages\Dashboard::class,
            ])
            ->discoverWidgets(in: app_path('Filament/Admin/Widgets'), for: 'App\\Filament\\Admin\\Widgets')
            ->widgets([
                Widgets\AccountWidget::class,
                Widgets\FilamentInfoWidget::class,
            ])
            ->middleware([
                EncryptCookies::class,
                AddQueuedCookiesToResponse::class,
                StartSession::class,
                AuthenticateSession::class,
                ShareErrorsFromSession::class,
                VerifyCsrfToken::class,
                SubstituteBindings::class,
                DisableBladeIconComponents::class,
                DispatchServingFilamentEvent::class,
            ])
            ->authMiddleware([
                Authenticate::class,
            ])
            ->authGuard('admin');
    }

    public function boot(): void
    {
        FilamentView::registerRenderHook(
          PanelsRenderHook::USER_MENU_BEFORE,
          fn (): View => view('components.admin-panel-badge')
        );
    }
}
class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->id('admin')
            ->path('admin')
            ->login()
            ->brandLogo(asset('images/logo.png'))
            ->favicon(asset('favicon.ico'))
            ->viteTheme('resources/css/app.css')
            ->sidebarCollapsibleOnDesktop()
            ->colors([
                'primary' => Color::Indigo,
            ])
            ->discoverResources(in: app_path('Filament/Admin/Resources'), for: 'App\\Filament\\Admin\\Resources')
            ->discoverPages(in: app_path('Filament/Admin/Pages'), for: 'App\\Filament\\Admin\\Pages')
            ->pages([
                Pages\Dashboard::class,
            ])
            ->discoverWidgets(in: app_path('Filament/Admin/Widgets'), for: 'App\\Filament\\Admin\\Widgets')
            ->widgets([
                Widgets\AccountWidget::class,
                Widgets\FilamentInfoWidget::class,
            ])
            ->middleware([
                EncryptCookies::class,
                AddQueuedCookiesToResponse::class,
                StartSession::class,
                AuthenticateSession::class,
                ShareErrorsFromSession::class,
                VerifyCsrfToken::class,
                SubstituteBindings::class,
                DisableBladeIconComponents::class,
                DispatchServingFilamentEvent::class,
            ])
            ->authMiddleware([
                Authenticate::class,
            ])
            ->authGuard('admin');
    }

    public function boot(): void
    {
        FilamentView::registerRenderHook(
          PanelsRenderHook::USER_MENU_BEFORE,
          fn (): View => view('components.admin-panel-badge')
        );
    }
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@layer components {
  .slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
    @apply appearance-none h-3.5 w-3.5 rounded-full bg-white border-2 border-black cursor-pointer;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@layer components {
  .slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
    @apply appearance-none h-3.5 w-3.5 rounded-full bg-white border-2 border-black cursor-pointer;
  }
}
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})
import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './vendor/filament/**/*.blade.php',
        './resources/views/**/*.blade.php',
        './resources/views/*.blade.php',
        './vendor/codewithdennis/filament-simple-alert/resources/**/*.blade.php'
    ],
}
import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './vendor/filament/**/*.blade.php',
        './resources/views/**/*.blade.php',
        './resources/views/*.blade.php',
        './vendor/codewithdennis/filament-simple-alert/resources/**/*.blade.php'
    ],
}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
 
        <meta name="application-name" content="{{ config('app.name') }}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>{{ config('app.name') }}</title>
 
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
 
        @filamentStyles
        @vite('resources/css/app.css')
    </head>
 
    <body class="antialiased">
        {{ $slot }}
 
        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
 
        <meta name="application-name" content="{{ config('app.name') }}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>{{ config('app.name') }}</title>
 
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
 
        @filamentStyles
        @vite('resources/css/app.css')
    </head>
 
    <body class="antialiased">
        {{ $slot }}
 
        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>
Jpac14
Jpac14OP•3w ago
No description
Jpac14
Jpac14OP•3w ago
No description
Jpac14
Jpac14OP•3w ago
non of those text-primary-700 etc are not getting applied should look something like this
Jpac14
Jpac14OP•3w ago
No description
Jpac14
Jpac14OP•3w ago
any help appreciated, i know it's probaly a silly issue bump 👍
ChesterS
ChesterS•3w ago
@Jpac14 did you run npm run build ?
Dennis Koch
Dennis Koch•3w ago
->colors([ 'primary' => Color::Indigo, ])
This doesn't mean that you can use Tailwind classes with that color now. It just for Filament methods that accept colors. Filament uses classes like text-custom-700 and provides the color via CSS vars. If you want to use those Tailwind classes, you need to create a theme and add those colors to your themes Tailwind config.

Did you find this page helpful?