Style Customization

Following the docs. I've done everything step by step but

.fi-sidebar {
    background-color: #fafafa;
}

.fi-sidebar {
    background-color: #fafafa;
}

.fi-sidebar {
    @apply bg-gray-50 dark:bg-gray-950 !important;
}

.fi-sidebar {
    @apply bg-gray-50 dark:bg-gray-950 !important;
}

doesn't work . I was testing it by changing sidebar color to see if it works but nothing changed .

42 Replies

LeandroFerreira•7mo ago

Did you run npm run build?

Noor•7mo ago

Failed to load PostCSS config @Leandro Ferreira it shows an error

DrByte•7mo ago

What's the error? Does the error have to do with your overall local config? Is the error because of the CSS you're trying to add/change? Does removing things you've added cause the error to go away?

Noor•7mo ago

[vite:css] Failed to load PostCSS config (searchPath: /var/www/html): [SyntaxError] Unexpected token 'export'
/var/www/html/postcss.config.js:1
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
file: /var/www/html/resources/css/app.css
error during build:

[vite:css] Failed to load PostCSS config (searchPath: /var/www/html): [SyntaxError] Unexpected token 'export'
/var/www/html/postcss.config.js:1
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
file: /var/www/html/resources/css/app.css
error during build:

@Leandro Ferreira @DrByte

DrByte•7mo ago

And your app.css file contents? and I guess postcss.config.js too

Noor•7mo ago

@tailwind base;
@tailwind components;
@tailwind utilities;

.fi-sidebar {
    @apply bg-green-50 dark:bg-green-950;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

.fi-sidebar {
    @apply bg-green-50 dark:bg-green-950;
}

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

@DrByte

LeandroFerreira•7mo ago

Could you try to rename postcss.config.js to postcss.config.cjs and run npm again?

Noor•7mo ago

ok done next? same issue

LeandroFerreira•7mo ago

It didn't work I think Did you follow these steps? https://filamentphp.com/docs/3.x/panels/themes/#creating-a-custom-theme

Themes - Panel Builder - Filament

awcodes•7mo ago

postcss.config.js should be module.exports not export default.

Noor•7mo ago

I've done both its working but my whole app is broken now its not clean why ? @awcodes @Leandro Ferreira

LeandroFerreira•7mo ago

what issue?

Noor•7mo ago

the whole layout is broken.. fields are not looking like before they are bigger and there shadow of headings behind those fields.. on forms cannot see the headings.. some of the fields background are white now. In short everything is messed up not aligned @Leandro Ferreira

awcodes•7mo ago

Sounds like you missed a step somewhere setting up your custom theme.

Noor•7mo ago

I double checked it all is good .. what should I check?

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', 
            //'resources/css/filament/app/theme.css'
        ],
            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', 
            //'resources/css/filament/app/theme.css'
        ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})

->maxContentWidth('full')
            //->viteTheme('resources/css/filament/app/theme.css')
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')

->maxContentWidth('full')
            //->viteTheme('resources/css/filament/app/theme.css')
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        screens: {
          sm: '480px',
          md: '768px',
          lg: '976px',
          xl: '1440px',
        },
        colors: {
          'blue': '#1fb6ff',
          'purple': '#7e5bef',
          'pink': '#ff49db',
          'orange': '#ff7849',
          'green': '#13ce66',
          'yellow': '#ffc82c',
          'gray-dark': '#273444',
          'gray': '#8492a6',
          'gray-light': '#d3dce6',
        },
        fontFamily: {
          sans: ['Graphik', 'sans-serif'],
          serif: ['Merriweather', 'serif'],
        },
        extend: {
          spacing: {
            '128': '32rem',
            '144': '36rem',
          },
          borderRadius: {
            '4xl': '2rem',
          }
        }
      }
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        screens: {
          sm: '480px',
          md: '768px',
          lg: '976px',
          xl: '1440px',
        },
        colors: {
          'blue': '#1fb6ff',
          'purple': '#7e5bef',
          'pink': '#ff49db',
          'orange': '#ff7849',
          'green': '#13ce66',
          'yellow': '#ffc82c',
          'gray-dark': '#273444',
          'gray': '#8492a6',
          'gray-light': '#d3dce6',
        },
        fontFamily: {
          sans: ['Graphik', 'sans-serif'],
          serif: ['Merriweather', 'serif'],
        },
        extend: {
          spacing: {
            '128': '32rem',
            '144': '36rem',
          },
          borderRadius: {
            '4xl': '2rem',
          }
        }
      }
}

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

This is what I've done please let me know if I missed something

LeandroFerreira•7mo ago

if you remove theme: {...} and run npm run build, what happens?

Noor•7mo ago

then it doesn't override classes for eg: if change colors and borders it doesn't do that but layout is fine now after removing theme

LeandroFerreira•7mo ago

change colors via panel/provider https://filamentphp.com/docs/3.x/panels/themes#changing-the-colors

Themes - Panel Builder - Filament

Noor•7mo ago

ok Thanks for help 🙂 do I need to run npm run build everytime I made some change in theme.css because If I don't run it ..it doesn't change anything and also not working without using !important but I can't use !important on every class right ?

LeandroFerreira•7mo ago

Yes. You can also use npm run dev to watch the changes. Are you using @apply in the css?

Noor•7mo ago

yes I'm using @apply @Leandro Ferreira

LeandroFerreira•7mo ago

It should work

awcodes•7mo ago

You shouldn’t need important at all using a theme. If you setup your theme correctly then it will replace filaments default theme completely. Something is still off in your setup.

Noor•7mo ago

idk what is it 🤯

awcodes•7mo ago

Hard to say without being able to look at the codebase. Sorry.

Noor•7mo ago

hmm it's ok Hello again, I just noticed that my terminal shows this when I run npm build

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

do you guys think, that it could be the reason my theme is not working ? @awcodes @Leandro Ferreira

awcodes•7mo ago

Would need to see your directory structure. You could be modifying the wrong tailwind file.

Andrew Wallo•7mo ago

Mine does that all the time too. That is normal for Filament considering the tailwind config is in an abnormal place. Can I see your package.json file? Also, I noticed that you showed you are putting this content in your app.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

.fi-sidebar {
    @apply bg-green-50 dark:bg-green-950;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

.fi-sidebar {
    @apply bg-green-50 dark:bg-green-950;
}

Your app.css should technically be empty. You are supposed to define the css inside your resources/css/filament/app/theme.css file if you are using the PanelBuilder. Also I am not sure why you commented out ->viteTheme() in your Panel, and also commented out //'resources/css/filament/app/theme.css' in your vite.config.js file.

Noor•7mo ago

My app was broken when I first tried it that's why I commented it out but now everything is working fine but still it shows those warn in terminal but everything else seems to be working fine

Andrew Wallo•7mo ago

Oh okay good. Yeah the warning in the terminal will be there. It's fine, don't worry about that. As long as everything works correctly. But you should still be defining your css in the theme.css file.

Noor•7mo ago

yes I'm doing that only thanks 🙂

Andrew Wallo•7mo ago

Okay just checking because you didn't show you were doing that 👍

Noor•7mo ago

oh yeah that is from yesterday 😄 It's working now thanks for your help 🙂

hashim199•3mo ago

how can i simply change the color of sidebar because in v3 it is same as background

LeandroFerreira•3mo ago

Create a theme and customize it via css https://filamentphp.com/docs/3.x/panels/themes/#creating-a-custom-theme

Themes - Panel Builder - Filament

hashim199•3mo ago

i am in the middle of a project i just want to change the color of the sidebar

Noor•2mo ago

did you figured it out ?

awcodes•2mo ago

Create a custom theme for filament and target the .fi-sidebar class in your theme.css file and change the color.

hashim199•2mo ago

if i do this than i have use npm .. this means at the time of deployment i will need two different ports one will run php artisan and second will run npm run dev.... 😞 no

krekas•2mo ago

huh? where's the problem with this?

Noor•2mo ago

whats's the issue with that then ? you just need to create custom theme and inspect the element and target the class then change the color run npm build

hashim199•2mo ago

OK OK

Gaming

Programming

Style Customization