Filament•4mo ago

filament, liveire full page compnent and larave breeze css issue

Hi i have a full page livewire component and all is good except if I add the presets to the main tailwind config, it breaks the breeze dashboard and profile styling, if i remove presets everything works but the filament colours are not showing in the component, i did make a custom theme for the admin panel, but not sure if i need to use that or even how to use it in a full page component. thanks.

17 Replies

Dennis Koch•4mo ago

Are you just using the admin panel and want to change colors? Then use ->colors() on the Panel Provider

CushtyOP•4mo ago

hi, not on the panel its a full page front facing component. been at it for hours, I have a tailwind config for my theme, which is working well in the panel, but if i add presets to main tailwind config the colors work but the laravel breeze css is messing up. Not sure what to do, hope you can help, thanks

Dennis Koch•4mo ago

Front-facing means just a Livewire component with the Form-Builder? Can you share that tailwindconfig that breaks everything?

CushtyOP•4mo ago

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

/** @type {import('tailwindcss').Config} */


import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],

    content: [

        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/views/components/*.blade.php',


    ],
    darkMode: 'class', // Enable dark mode
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },

        },
    },

    plugins: [forms],

};

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

/** @type {import('tailwindcss').Config} */


import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],

    content: [

        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/views/components/*.blade.php',


    ],
    darkMode: 'class', // Enable dark mode
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },

        },
    },

    plugins: [forms],

};

I am using a table on the frontend, thanks

Dennis Koch•4mo ago

it breaks the breeze dashboard and profile styling

Can you explain and/or share a screenshot on how it breaks? The preset specifies: colors, plugins, darkmode via class and content. But Tailwind should merge the preset with your config

Wrax•4mo ago

I did something similar recently and had a brief issue with styling. Here is my config:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [...

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [...

Addtionally I wasn't using dark styles on my front-end so I also had to remove some dark references in my layout's Alpine. I think filament scans for dark references in order to decide what styles to serve the table in.

`<body class="antialiased"
      x-cloak
      x-data="{
{{-- removed darkMode: $persist(false),--}}
            scrolled: false, mobileOpen: false,
            showContact: $persist(false),
            viewing: $persist('training'),
            filterLevel: $persist('all'),
            selectedService: $persist(''),
        }"
      x-init="window.addEventListener('scroll', () => { scrolled = (window.scrollY > 0) })"
{{--removed :class="{'dark': darkMode === false}"--}} 
>

{{ $slot }}

@filamentScripts
@livewireScripts
@vite('resources/js/app.js')
</body>

CushtyOP•4mo ago

hi please find a screenshot, the CSS styling is gone and if you click on the profile name on the header the drop-down does not open anymore. I am using a filament table in a livewire full-page component. the tailwind config I showed is the main config in the app, I have another config but it's for my panel theme. this is my resources/views/components/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="antialiased">
<div class="min-h-screen bg-gray-100">
    @include('layouts.navigation')

    <!-- Page Heading -->
    @isset($header)
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                {{ $header }}
            </div>
        </header>
    @endisset

    <main>
        {{ $slot }}
    </main>
</div>

@filamentScripts
@vite('resources/js/app.js')
</body>
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="antialiased">
<div class="min-h-screen bg-gray-100">
    @include('layouts.navigation')

    <!-- Page Heading -->
    @isset($header)
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                {{ $header }}
            </div>
        </header>
    @endisset

    <main>
        {{ $slot }}
    </main>
</div>

@filamentScripts
@vite('resources/js/app.js')
</body>
</html>

Thanks

CushtyOP•4mo ago

I worked it out for anyone who has this issue when you add preset to tailwind config it overrides all x-app-layout and x-guest-layout you need to add @FilamentStyles in the head of the layout files, I hope this is correct @Dennis Koch Thanks

Dennis Koch•4mo ago

Not sure how a Tailwind Preset should override something in a Blade file? 🤔

CushtyOP•4mo ago

It seems to override the x-app-layout, I double checked and if I add the preset the breeze files css doesnt work as expected. I hope my solution wont cause any issues? Thanks

Dennis Koch•4mo ago

But <x-app-layout> is a Blade file? How can a Tailwind Config overwrite anything?

CushtyOP•2mo ago

Your right just did another fresh install, installed the notifications package and the laravel normal views css are broken. I went through the docs and installed everything, but if i have the preset in Tailwind config it breaks the default laravel views, banging my head now lol

CushtyOP•2mo ago

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Scripts -->

    @vite(['resources/css/app.css', 'resources/js/app.jsx'])
    @filamentStyles



</head>

<body class="font-sans antialiased">
    <div class="min-h-screen bg-gray-100">
        @include('layouts.navigation')

        <!-- Page Heading -->
        @isset($header)
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>
        @endisset

        <!-- Page Content -->
        <main>
            {{ $slot }}
        </main>
    </div>
    @livewire('notifications')
    @filamentScripts
</body>

</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Scripts -->

    @vite(['resources/css/app.css', 'resources/js/app.jsx'])
    @filamentStyles



</head>

<body class="font-sans antialiased">
    <div class="min-h-screen bg-gray-100">
        @include('layouts.navigation')

        <!-- Page Heading -->
        @isset($header)
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>
        @endisset

        <!-- Page Content -->
        <main>
            {{ $slot }}
        </main>
    </div>
    @livewire('notifications')
    @filamentScripts
</body>

</html>

import { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig(() => {
    const env = loadEnv('', process.cwd(), '');

    return {
        define: {
            'process.env.VITE_CAL_CLIENT_ID': JSON.stringify(env.VITE_CAL_CLIENT_ID),
            'process.env.VITE_CAL_BASE_URL': JSON.stringify(env.VITE_CAL_BASE_URL),
            'process.env.VITE_CAL_REFRESH_URL': JSON.stringify(env.VITE_CAL_REFRESH_URL),
        },
        plugins: [
            laravel({
                input: ['resources/css/app.css', 'resources/js/app.jsx', 'resources/js/alpine.js'],
                refresh: ['app/Livewire/**', 'resources/views/**'],
            }),
            react({
                include: "**/*.{jsx,js}",
            }),
        ],
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './'),
            },
        },
    };
});

import { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig(() => {
    const env = loadEnv('', process.cwd(), '');

    return {
        define: {
            'process.env.VITE_CAL_CLIENT_ID': JSON.stringify(env.VITE_CAL_CLIENT_ID),
            'process.env.VITE_CAL_BASE_URL': JSON.stringify(env.VITE_CAL_BASE_URL),
            'process.env.VITE_CAL_REFRESH_URL': JSON.stringify(env.VITE_CAL_REFRESH_URL),
        },
        plugins: [
            laravel({
                input: ['resources/css/app.css', 'resources/js/app.jsx', 'resources/js/alpine.js'],
                refresh: ['app/Livewire/**', 'resources/views/**'],
            }),
            react({
                include: "**/*.{jsx,js}",
            }),
        ],
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './'),
            },
        },
    };
});

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: ['class'],
    presets: [preset],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './components/**/*.jsx',
        './resources/**/*.jsx',
        './resources/**/*.js',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans]
            },
            
    plugins: [forms, require("tailwindcss-animate")],
};

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: ['class'],
    presets: [preset],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './components/**/*.jsx',
        './resources/**/*.jsx',
        './resources/**/*.js',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans]
            },
            
    plugins: [forms, require("tailwindcss-animate")],
};

is there anything that i missed? thanks

Dennis Koch•2mo ago

I haven't used it yet, but I think somebody else reported issues with the combination of Breeze and the Filament preset before.

CushtyOP•2mo ago

Can I ask why we need the preset? Will the notifications still work?

Dennis Koch•2mo ago

It contains all the configuration. If you remove it some styles may not work on Filament components

MZX•2mo ago

I ran into the same issue a while ago, the way to 'fix' this, is head into the login blade, and add bg color to the tailwind class

Gaming

Programming

filament, liveire full page compnent and larave breeze css issue