F
Filament•2mo ago
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>
<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'],
        },
    ],

}
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'],
        },
    ],

}
13 Replies
awcodes
awcodes•2mo ago
Is the w-4 h-4 working and or is the circle just getting squished by the span since it’s a flex container. Personally, I would forgo the safelist unless you actually need it and just make sure the view is included in the content array.
Coby
CobyOP•2mo ago
Yes the w-4 and h-4 is working. And the bg-gray-400 is working
Coby
CobyOP•2mo ago
No description
Coby
CobyOP•2mo ago
The 6's circle is showing as bg-green-300 in inspect element And the path is also included in the content array
awcodes
awcodes•2mo ago
Can you give me a screen shot of the css class in devtools? The class definition, not the html.
Coby
CobyOP•2mo ago
No description
awcodes
awcodes•2mo ago
Hmm, there’s no bg-green in the stylesheet. That’s weird. Is that the tailwind.config.js for your custom theme? Ie, you do have a custom theme for the panel, correct?
Coby
CobyOP•2mo ago
Yes I have a custom theme It only has this in it 
.fi-fo-component-ctn .prose p {
    margin-top: 0 !important;
    margin-bottom: 0.25em !important;
}
.fi-fo-component-ctn .prose p {
    margin-top: 0 !important;
    margin-bottom: 0.25em !important;
}
Its linked in my AppServiceProvider 
FilamentAsset::register([
            Css::make('custom-styles', asset('css/custom.css')),
        ]);
FilamentAsset::register([
            Css::make('custom-styles', asset('css/custom.css')),
        ]);
awcodes
awcodes•2mo ago
Custom themes should be registered through the panel.
awcodes
awcodes•2mo ago
awcodes
awcodes•2mo ago
Or am I wrong assuming you are using the panels package and this is standalone filament package usage?
Coby
CobyOP•2mo ago
I'm a bit confused 😂 , but I am using an Admin panel and have an AdminPanelProvider so i'm guessing i am using a panels package. Should i be regestering it like this 
>theme(asset('css/filament/admin/theme.css'))
>theme(asset('css/filament/admin/theme.css'))
but with the custom.css underneath that line?
awcodes
awcodes•2mo ago
Follow the instructions in the link. Then finish it with the instructions output in the terminal. I would still think what you are doing would work, but either your css file isn’t getting loaded or the content paths are off. But doing the custom theme the right way will prevent bloat and issues with needing !important

Did you find this page helpful?