Filament•11mo 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•11mo ago

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

Horia•11mo ago

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

toeknee•11mo ago

What does your tailwind config look likke

Horia•11mo 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•11mo 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

Horia•11mo 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•11mo 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•11mo ago

you are missing filament preset it's in the docs

krekas•11mo 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