Filament•5w ago

Badge is unstyled

Hi guys, I just recognised that Badges are unstyled in my application. I'll share the tailwind.config.js in the next message.

4 Replies

alexanderkroneisOP•5w ago

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './app/Filament/**/*.php',
        './resources/**/*.js',
        './resources/**/*.blade.php',
        './resources/views/filament/**/*.blade.php',
        './storage/framework/views/*.php',
        './vendor/filament/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './vendor/livewire/flux-pro/stubs/**/*.blade.php',
        './vendor/livewire/flux/stubs/**/*.blade.php'
    ],

    darkMode: 'selector',

    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#fef6ee',
                    100: '#fdead7',
                    200: '#f9d1af',
                    300: '#f5b07c',
                    400: '#f08447',
                    500: '#ec6626',
                    600: '#dd4b19',
                    700: '#b73717',
                    800: '#922e1a',
                    900: '#762818',
                    950: '#40110a',
                },
            },
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            gridTemplateRows: {
                '[auto,auto,1fr]': 'auto auto 1fr',
            },
        },
    },

    plugins: [forms, typography],
};

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './app/Filament/**/*.php',
        './resources/**/*.js',
        './resources/**/*.blade.php',
        './resources/views/filament/**/*.blade.php',
        './storage/framework/views/*.php',
        './vendor/filament/**/*.blade.php',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './vendor/livewire/flux-pro/stubs/**/*.blade.php',
        './vendor/livewire/flux/stubs/**/*.blade.php'
    ],

    darkMode: 'selector',

    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#fef6ee',
                    100: '#fdead7',
                    200: '#f9d1af',
                    300: '#f5b07c',
                    400: '#f08447',
                    500: '#ec6626',
                    600: '#dd4b19',
                    700: '#b73717',
                    800: '#922e1a',
                    900: '#762818',
                    950: '#40110a',
                },
            },
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            gridTemplateRows: {
                '[auto,auto,1fr]': 'auto auto 1fr',
            },
        },
    },

    plugins: [forms, typography],
};

Any ideas? Also login is weirdly styled :/

awcodes•5w ago

Are you using panels or standalone filament packages?

awcodes•5w ago

If you’re using stand alone packages outside the panel then you need the preset. https://filamentphp.com/docs/3.x/tables/installation#installing-tailwind-css

Installation - Tables - Filament

alexanderkroneisOP•4w ago

Oh boy... I just recognized that I am using Tailwind v4

Gaming

Programming

Badge is unstyled

Did you find this page helpful?