Filament•15mo ago

Filament color and layout issues after upgrading to v3

After upgrading to v3, Filament colors are not showing, and my layout looks kind of weird, like in the attached picture. I removed all color references from tailwind.config, recompiled assets, cleared view cache. Any help would be appreciated!

9 Replies

toeknee•15mo ago

Did you rebuild the assets? Have you overridden any filament views?

HoriaOP•15mo ago

Yes, I have rebuilt the assets, and I have not overridden any views.

toeknee•15mo ago

What does your tailwind config look likke

HoriaOP•15mo ago

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

module.exports = {
    darkMode: "class",
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Nunito", ...defaultTheme.fontFamily.sans],
            },
            // colors: {
            //     danger: colors.rose,
            //     primary: colors.blue,
            //     inactive: colors.red,
            //     success: colors.green,
            //     warning: colors.yellow,
            // },
        },
    },

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

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

module.exports = {
    darkMode: "class",
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Nunito", ...defaultTheme.fontFamily.sans],
            },
            // colors: {
            //     danger: colors.rose,
            //     primary: colors.blue,
            //     inactive: colors.red,
            //     success: colors.green,
            //     warning: colors.yellow,
            // },
        },
    },

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

awcodes•15mo ago

You need to update you’re tailwind config to use the tailwind preset for v3 and make sure to register the css file in your panel. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

HoriaOP•15mo ago

I don't need a custom theme, I am happy with the default one, just that it looks odd after upgrade. Still need to use a theme anyway?

awcodes•15mo ago

if you have a tailwind.config.js then you are using a custom theme anyway. and the way colors are handled in v3 is different that v2. so you need to update your theme.

krekas•15mo ago

you are missing filament preset it's in the docs

krekas•15mo ago

https://filamentphp.com/docs/3.x/tables/installation#installing-tailwind-css

Installation - Table Builder - Filament

Gaming

Programming

Filament color and layout issues after upgrading to v3