#Laravel Livewire starter kit responsive layouts not properly rendered

1 messages · Page 1 of 1 (latest)

unreal owl
#

See screenshot to better understand what I mean with not rendering properly. Text is supposed to be white.

  • Fresh install, followed wizard etc, auto npm i & build + composer run dev

Laravel 12.3.0
Flux 2.1.0
Livewire 3.6.2

Untitled.png
# 
{{-- split.blade.php --}}

<div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
            <div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r dark:border-neutral-800">
                <div class="absolute inset-0 bg-neutral-900"></div>
                <a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
                    <span class="flex h-10 w-10 items-center justify-center rounded-md">
                        <x-app-logo-icon class="mr-2 h-7 fill-current text-white" />
                    </span>
                    {{ config('app.name', 'Laravel') }}
                </a>

                @php
                    [$message, $author] = str(Illuminate\Foundation\Inspiring::quotes()->random())->explode('-');
                @endphp

                <div class="relative z-20 mt-auto">
                    <blockquote class="space-y-2">
                        <flux:heading size="lg">&ldquo;{{ trim($message) }}&rdquo;</flux:heading>
                        <footer><flux:heading>{{ trim($author) }}</flux:heading></footer>
                    </blockquote>
                </div>
            </div>
            <div class="w-full lg:p-8">
                <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
                    <a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
                        <span class="flex h-9 w-9 items-center justify-center rounded-md">
                            <x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
                        </span>

                        <span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
                    </a>
                    {{ $slot }}
                </div>
            </div>
        </div>
coarse hawk
#

Couldn't that be what it is supposed to look like? Unless you have seen it different elsewhere?

unreal owl
#

Anywhere whether that's a blog post, youtube video, or google images you'll find;

#

As you can see the text is readable, white instead of gray

thin saffron
#

Perhaps make tailwind behave for dark and light mode 🙂

unreal owl
#

Just a little weird, since this is part of the starter kit

# 
                    <blockquote class="space-y-2 **:text-white">
                        <flux:heading size="lg">&ldquo;{{ trim($message) }}&rdquo;</flux:heading>
                        <footer><flux:heading>{{ trim($author) }}</flux:heading></footer>
                    </blockquote>
#

adding **:text-white works

#

flux seems to be the issue here

thin saffron
#

i'm glad it works though

#

I'm not familiar with so many front-end systems, i'm predominantly back-end.