Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Components styling don't work as expected #1167

Open
3 tasks done
lahoje opened this issue Feb 23, 2025 · 12 comments
Open
3 tasks done

Components styling don't work as expected #1167

lahoje opened this issue Feb 23, 2025 · 12 comments

Comments

@lahoje
Copy link

lahoje commented Feb 23, 2025

Flux version

v2.0.2 pro

Livewire version

v3.5.20

Tailwind version

v4.0.8

Browser and Operating System

Firefox on macos

What is the problem?

The components styling doesn't appear as it should. I've followed the installations instructions literally. If I remove the @fluxAppearance it seem to work. See attached images of a calendar component, first with @fluxAppearance and the second without @fluxAppearance.

Image

Image

Code snippets

app.blade.php

<!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.js'])
        @fluxAppearance

    </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-sm">
                    <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>
        @fluxScripts
    </body>
</html>

How do you expect it to work?

As it should...

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.
@jeffchown
Copy link

@lahoje Were you upgrading this app from Flux 1.0 to TW 4 + Flux 2.0? Or is it a new app?
Can you post your app.css and your view file?

@lahoje
Copy link
Author

lahoje commented Feb 23, 2025

Hi and thanks for your reply, it's a new app from scratch. with following steps:

  1. composer create-project laravel/laravel dokibas
  2. composer require laravel/breeze --dev
  3. composer require livewire/livewire
  4. php artisan livewire:publish --config
  5. composer require livewire/flux
  6. https://tailwindcss.com/docs/installation/framework-guides/laravel/vite

app.css

@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@custom-variant dark (&:where(.dark, .dark *));

@plugin '@tailwindcss/forms';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../views';

@theme {
  --font-sans:
    Figtree, ui-sans-serif, system-ui, Inter, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

dashboard.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xs sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    {{ __("You're logged in!") }}
                <div class="mt-8 w-72">
                    <flux:calendar />
                </div>
                </div>
            </div>
        </div>

    </div>
</x-app-layout>

@jeffchown
Copy link

@lahoje Your issue may be related to: #1118

One thing... can you update one section of your view:

-<div class="p-6 text-gray-900">
-    {{ __("You're logged in!") }}
-    
-    <div class="mt-8 w-72">
-        <flux:calendar />
-    </div>
-</div>
+<div class="p-6 text-gray-900">
+    {{ __("You're logged in!") }}
+</div>
+
+<div class="mt-8 w-72">
+    <flux:calendar />
+</div>

then:

  • run php artisan view:clear
  • run npm run build

and see if that makes any difference?

You had the calendar nested in a div that set the text color and I want to make sure that isn't affecting the calendar.

@lahoje
Copy link
Author

lahoje commented Feb 23, 2025

It made no difference, unfortunately.

@joshhanley
Copy link
Member

@lahoje thanks for reporting! This does seem a duplicate of #1118 but I'm going to leave this open as that thread is getting really long, so we will just do your debugging here.

Can you create a simple page and just put <flux:button variant="primary">Test</flux:button> on it and tell us if it renders a dark primary button properly for you? I just want to check if you are having styling issues with Flux as a whole or just the calendar, as in the other issue the primary button won't render either.

@joshhanley joshhanley mentioned this issue Feb 23, 2025
Open
3 tasks
@lahoje
Copy link
Author

lahoje commented Feb 23, 2025

With the @fluxAppearance it's white

Image

and without @fluxAppearance it's black.

Image

<x-app-layout>
    <div class="p-5">
        <flux:button variant="primary">Test</flux:button>
    </div>
</x-app-layout>

@jeffchown
Copy link

@lahoje We just had a breakthrough in the related issue, do you have a global .gitignore file?
See #1118 (comment)

@joshhanley
Copy link
Member

@lahoje yep that looks good to me, so that suggest Flux styles are working correctly. Basically if you use @fluxAppearance, it will follow your system theme, so if your system is in dark mode, then the button will be white. But without @fluxAppearance it will default to light theme and be a black button.

Not sure why the calendar would be rendering like that with @fluxAppearance as the whole calendar should change. As @jeffchown asked, do you maybe have a global git ignore file and if so, can you share it?

Are you able to push a test repo to GitHub that demonstrates the calendar issue so we can pull it and see if the same problem is happening for us?

@lahoje
Copy link
Author

lahoje commented Feb 23, 2025 via email

@joshhanley
Copy link
Member

@lahoje no worries! That'd be great, thanks 🙂

@lahoje
Copy link
Author

lahoje commented Feb 24, 2025 •
edited
Loading

@joshhanley Good moring ☀️, here's the repo: https://github.com/lahoje/dokibas

@lahoje
Copy link
Author

lahoje commented Feb 24, 2025

@joshhanley I just tested it again ( 9.40 am) and all of the sudden it worked, even with @fluxAppearance in the blade layout. Don't recall updating something 😊. Could it be something to do with the system dark/light thing?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@joshhanley @lahoje @jeffchown