F
Filament•5mo 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
            },
        }
    }
}
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',
                ]),
Forms\Components\Split::make([
...
                ])->from('3xl')
                ->columnSpanFull()
                ->extraAttributes([
                    'class' => 'flex 3xl:items-stretch',
                ]),
Themes - Panels - Filament
2 Replies
robi
robi•5mo ago
1. Ensure the Correct Config Is Being Used Make sure that resources/css/filament/app/tailwind.config.js is actually being referenced when you build your CSS. Sometimes Tailwind defaults to the root tailwind.config.js or one specified in postcss.config.js. If you’re using Vite, check the vite.config.js to ensure it's using the correct Tailwind config. If you're using Laravel Mix, the correct config must be explicitly used if it's not in the root. 2. Rebuild Fully You mentioned running npm run build and npm run dev, which is great. However, make sure you: Delete your node_modules and public/build (if applicable). Then re-run: rm -rf node_modules rm -rf public/build npm install npm run build 3. Confirm the CSS Output Open your generated CSS and search for classes or media queries with your custom breakpoints: @media (min-width: 100rem) { /* Should exist for 3xl */ } Add a dummy use of the custom breakpoints in one of your Blade views to prevent them from being purged: <!-- Prevent purging --> <div class="3xl:bg-red-500 4xl:bg-green-500 5xl:bg-blue-500 hidden"></div> If you’re still stuck, feel free to share: How you're loading Tailwind (e.g., Vite, Mix, etc.) Any errors or lack of generated media queries A snippet of the HTML where you're trying to use the breakpoint Let’s get this fixed together.
Lucky0
Lucky0OP•5mo ago
I appreciate the help. I only came here when AI cant help me. I know when something is written with AI. I've seen similar answers.

Did you find this page helpful?