How do i change the background color of a Section layout

I have some Sections in a from but i want them to have different background colors. How can i do that ?

Solution:

apperantly i have to add them to the tailwind safelist property inside of the content since they are dynamicly created

Jump to solution

20 Replies

Patrick Boivin•9mo ago

You can give each section a unique CSS class with ->extraAttributes(['class' => 'my-section'])

ico•9mo ago

i did try that

$sectionColor = [
    1 => 'bg-red-400',
    2 => 'bg-orange-400',
    3 => 'bg-blue-400',
    4 => 'bg-green-400',
][$category];

............
  ->extraAttributes(['class' => $sectionColor])
  ->columns(3),

$sectionColor = [
    1 => 'bg-red-400',
    2 => 'bg-orange-400',
    3 => 'bg-blue-400',
    4 => 'bg-green-400',
][$category];

............
  ->extraAttributes(['class' => $sectionColor])
  ->columns(3),

But it didn't color it

Dennis Koch•9mo ago

Is the class added? Do you have a custom theme? Check your DevTools

Solution

ico•9mo ago

apperantly i have to add them to the tailwind safelist property inside of the content since they are dynamicly created

Dennis Koch•9mo ago

You don’t have to. Is your filament folder added to the content config?

ico•9mo ago

yes the ./vendor/filament/**/*.blade.php yes

Dennis Koch•9mo ago

But not the Filament file where the classes are defined

ico•9mo ago

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

module.exports = {

    /**
     * these lines are needed for the Filament v3 theme
     *
     * @see https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css
     *
     */
    presets: [preset],
    darkMode: 'class',
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        './vendor/filament/**/*.blade.php',
    ],

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

module.exports = {

    /**
     * these lines are needed for the Filament v3 theme
     *
     * @see https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css
     *
     */
    presets: [preset],
    darkMode: 'class',
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        './vendor/filament/**/*.blade.php',
    ],

this is what i have like content and the presets

Dennis Koch•9mo ago

Yes. But the Filament file you are defining the classes in, is probably located under app/Filament/**?!

ico•9mo ago

filament did generate a folder in the public/css folder and it did fill it wits its own css files

Dennis Koch•9mo ago

I am talking about this! Where is that file? Where do you define $sectionColor?

ico•9mo ago

I am using only the form builder with a livewire component so i have made it inside App/Http/Livewire after i upgraded Livewire to v3 it asked me to change the namespacing but decided it will be a headache so i left them there

Dennis Koch•9mo ago

Then you need to add app/Http/Livewire/** to contentso Tailwind scans those files.

ico•9mo ago

ouuu

Dennis Koch•9mo ago

Does it click? 😅 Tailwind can only find classes in files it knows

ico•9mo ago

yes will try it now nope didn't work if i do it with

$sectionColor = [
    1 => '#FFE5E5',
    2 => '#FFF3E5',
    3 => '#E5F1FF',
    4 => '#F5FFE5',
][$category];

......
->extraAttributes(['style' => "background-color: $sectionColor"])

$sectionColor = [
    1 => '#FFE5E5',
    2 => '#FFF3E5',
    3 => '#E5F1FF',
    4 => '#F5FFE5',
][$category];

......
->extraAttributes(['style' => "background-color: $sectionColor"])

it works but the default tailwind classes it doesn't recognize them

awcodes•9mo ago

Are you rebuilding between each change? npm run dev Tailwind isn’t some massive stylesheet. It has to rebuild to generate the final stylesheet.

ico•9mo ago

yes did entire cache/view/config/route clears build + dev and cleared the browser cache/cookies

awcodes•9mo ago

Something off in your setup then. Without being able to see the code base it’s going to be hard to help with this.

Dennis Koch•9mo ago

Weird. But definitely should work, if you include the right files

Gaming

Programming

How do i change the background color of a Section layout