FilamentF
Filament•5mo ago•
21 replies
Coby

Using colours in a blade file

I'm trying to use the bg-green-300 colour in my blade file.

<div class="flex items-center justify-center">
                        <span class="text-sm text-gray-500 mr-1">{{ $day }}</span>
                        <div @class([
                            'w-4 h-4 rounded-full',
                            'bg-green-300  dark:bg-green-600' => $isAssigned,
                            'bg-gray-300 dark:bg-gray-600' => !$isAssigned,
                        ])></div>
                    </div>


I can see the style is being applied in inspect element but the circle is not appearing. As if the colour isn't being applied.

My tailwind.config.js

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/filament/forms/components/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-quick-create/resources/**/*.blade.php',
        './vendor/guava/calendar/resources/**/*.blade.php',
    ],
    
    safelist: [
        {
            pattern: /(text|border|bg)-(red|green|amber|violet|blue|gray)-(100|200|300|400|500|600|700|800|900)/,
            variants: ['dark', 'peer-checked', 'hover'],
        },
    ],

}
Was this page helpful?