Filament•2mo ago

Issue with button color theming on front-end (forms, etc)

Hi all — I'm very likely being daft here but I'm having an issue with buttons showing up without colours on the front end. Text etc fields seem to work ok. I've followed the guide here for getting forms on the front end: https://filamentphp.com/docs/3.x/forms/installation and looked all over the "Colors" section in core concepts (https://filamentphp.com/docs/3.x/support/colors) but am at a loss as to what might be going on. I've attached an example of how it looks. Almost certain to be missing some crucial step here or not understanding some high level concept but if anyone has any advice on this I'd really appreciate it. Scratching my head here!

Installation - Form Builder - Filament

Colors - Core Concepts - Filament

6 Replies

jlove1672•2mo ago

You should just be able to use your defined tailwind colors for frontend work - thats what we do We define a set of brand colors inside tailwind.config.js - its separate to our backend which is built with filament-panels

maninscotland•2mo ago

Sort of half fixed this by doing the following in tailwind config:

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'custom': {
                    600: colors.amber[600]
                }
            }
        },
    },

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'custom': {
                    600: colors.amber[600]
                }
            }
        },
    },

(Specifically the colors bit)

maninscotland•2mo ago

Looks like this now

maninscotland•2mo ago

But doesn't feel like I've gone down the right path at all, and weirdly "Cancel" still looks wrong Oh, I can account for cancel actually, I had some custom classes in the button component Submit is super basic though:

            <x-filament::button type="submit">
                Submit
            </x-filament::button>

            <x-filament::button type="submit">
                Submit
            </x-filament::button>

awcodes•2mo ago

It sounds like you’re missing the filament preset in your tailwind.config.js. Or you’re missing the necessary content routes.

maninscotland•2mo ago

Happy to post the full config here —

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

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
export default {
    preset: [
        preset
    ],
    content: [
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './vendor/filament/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'custom': {
                    600: colors.amber[600]
                }
            }
        },
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
};

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

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
export default {
    preset: [
        preset
    ],
    content: [
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './vendor/filament/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'custom': {
                    600: colors.amber[600]
                }
            }
        },
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
};

Weirdly though there is no difference on the front end when I comment/uncomment that preset definition 🤨 Ohhh myyyy..... I see what's wrong, I called it "preset" not "presets" 🤦‍♂️ Jeezo, that was it! I've removed that colors nonsense and made the include consistent with the others (just slapped it straight into the preset array and it's all working now, it uses the colours I've defined in AppServiceProvider with FilamentColor::register I can go from here, thanks for the rubber-ducking and help folks!

Gaming

Programming

Issue with button color theming on front-end (forms, etc)