filament, liveire full page compnent and larave breeze css issue | Filament | Page 1

glacial dove Aug 2, 2024, 2:20 PM

#

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.

versed solarBOT Aug 2, 2024, 2:20 PM

#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

dim crescent Aug 2, 2024, 4:15 PM

#

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

glacial dove Aug 3, 2024, 10:18 AM

#

dim crescent Are you just using the admin panel and want to change colors? Then use `->colors...

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

dim crescent Aug 3, 2024, 1:19 PM

#

Front-facing means just a Livewire component with the Form-Builder?

#

Can you share that tailwindconfig that breaks everything?

glacial dove Aug 3, 2024, 2:04 PM

#

dim crescent Can you share that tailwindconfig that breaks everything?

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

dim crescent Aug 3, 2024, 2:15 PM

#

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

hasty gust Aug 3, 2024, 2:17 PM

#

I did something similar recently and had a brief issue with styling.

Here is my config:

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>``

glacial dove Aug 4, 2024, 7:09 AM

#

dim crescent The preset specifies: colors, plugins, darkmode via class and content. But Tailw...

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>

Thanks

glacial dove Aug 6, 2024, 10:01 AM

#

dim crescent The preset specifies: colors, plugins, darkmode via class and content. But Tailw...

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 @boreal loomStyles in the head of the layout files, I hope this is correct @dim crescent Thanks

dim crescent Aug 6, 2024, 3:46 PM

#

glacial dove I worked it out for anyone who has this issue when you add preset to tailwind co...

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

glacial dove Aug 8, 2024, 8:35 AM

#

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

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

dim crescent Aug 8, 2024, 1:21 PM

#

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

glacial dove Sep 28, 2024, 9:54 AM

#

dim crescent But `<x-app-layout>` is a Blade file? How can a Tailwind Config overwrite anythi...

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

#

<!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, './'),
            },
        },
    };
});

#

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

#

@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")],
};

#

is there anything that i missed? thanks

dim crescent Sep 28, 2024, 10:32 AM

#

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

glacial dove Sep 28, 2024, 11:50 AM

#

dim crescent I haven't used it yet, but I think somebody else reported issues with the combin...

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

dim crescent Sep 28, 2024, 11:53 AM

#

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

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

minor terrace Oct 11, 2024, 9:34 PM

#

glacial dove Your right just did another fresh install, installed the notifications package a...

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

obtuse adder Apr 3, 2025, 8:40 PM

#

Same situation here today

#filament, liveire full page compnent and larave breeze css issue