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•14mo ago

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

icoOP•14mo 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•14mo ago

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

Solution

ico•14mo ago

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

Dennis Koch•14mo ago

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

icoOP•14mo ago

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

Dennis Koch•14mo ago

But not the Filament file where the classes are defined

icoOP•14mo 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•14mo ago

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

icoOP•14mo ago

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

Dennis Koch•14mo ago

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

icoOP•14mo 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•14mo ago

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

icoOP•14mo ago

ouuu

Dennis Koch•14mo ago

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

icoOP•14mo 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•14mo 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.

icoOP•14mo ago

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

awcodes•14mo 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•14mo 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