FilamentF
Filament•7mo ago
Lucky0

custom screens breakpoints

i have created a custom theme and add custom breakpoints.
i followed this instruction: "https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme"

but for some reason the custom breakpoint is not getting applied. i did run npm run build and npm run dev.

path: resources\css\filament\app\tailwind.config.js
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            screens: {
                '3xl': '100rem',  // 1600px
                '4xl': '120rem',  // 1920px
                '5xl': '160rem',  // 2560px
            },
        }
    }
}



Forms\Components\Split::make([
...
                ])->from('3xl')
                ->columnSpanFull()
                ->extraAttributes([
                    'class' => 'flex 3xl:items-stretch',
                ]),
Themes - Panels - Filament
Was this page helpful?