Input label and badge spacing missing after upgrade

[jlarm]

Flux version

v2.0

Livewire version

v3.4

Tailwind version

v4.0.7

What is the problem?

When displaying a "Required" badge in the label for a field there is no spacing between the label and input field after the upgrade to v2.

Code snippets

<flux:field>
    <flux:label badge="Required">Email</flux:label>

    <flux:input type="email" required />

    <flux:error name="email" />
</flux:field>
<flux:input wire:model="form.name" label="Name" badge="required" />

How do you expect it to work?

There should be a gap between the label and the input field.

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]

@jlarm Your code works for me. Have you run php artisan view:clear after upgrading?

[jlarm]

Yep, no custom css styles are being used either. Just flux and tailwind defaults. This is a brand new app that was just started a couple of days ago.

[jeffchown]

@jlarm Tough to help when I can't recreate it - If you can find out which CSS is causing it via your browser's dev tools, that might help.

[jlarm]

From what it looks like, margin-bottom is not getting added to the label. The left side of the screenshot is the flux site, the right side is my local dev.

[jeffchown]

@jeffchown And I can confirm my CSS includes the margin-bottom the same as the left of your image. I suspect it's related to TW4.

Can you share your app.css and tailwind.config.js?

[jlarm]

After running the tailwind upgrade everything is in the app.css file which was updated to look like this:

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

@plugin '@tailwindcss/forms';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
@source "../views";

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

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

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

/* Re-assign Flux's gray of choice... */
@theme {
    --color-zinc-50: var(--color-gray-50);
    --color-zinc-100: var(--color-gray-100);
    --color-zinc-200: var(--color-gray-200);
    --color-zinc-300: var(--color-gray-300);
    --color-zinc-400: var(--color-gray-400);
    --color-zinc-500: var(--color-gray-500);
    --color-zinc-600: var(--color-gray-600);
    --color-zinc-700: var(--color-gray-700);
    --color-zinc-800: var(--color-gray-800);
    --color-zinc-900: var(--color-gray-900);
    --color-zinc-950: var(--color-gray-950);
}

@theme {
    --color-accent: var(--color-sky-600);
    --color-accent-content: var(--color-sky-600);
    --color-accent-foreground: var(--color-white);
}

@layer theme {
    .dark {
        --color-accent: var(--color-sky-600);
        --color-accent-content: var(--color-sky-400);
        --color-accent-foreground: var(--color-white);
    }
}

[jeffchown]

@jlarm Do you have a tailwind.config.js file as well?

I think you should be able to remove these 2 lines from your app.css:

@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

then npm run build and php artisan view:clear and clear your browser's cache before trying again.

Also, did you publish any Flux views? If so, please delete them and try again.

[jlarm]

I don't have a tailwind.config.js file anymore. I did those steps and tried it in incognito and a different browser but still don't see the margin-bottom on the labels.

[jeffchown]

@jlarm And you haven't previously published any of the Flux components?

[jlarm]

Sorry, forgot to mention that. I have not published any of the components.

[jeffchown]

I'll have to give this one a think...

[jeffchown]

What about your layout file? Can you post your layout and the view's blade file?

[jlarm]

Sure, no problem. It is a mess right now 😵‍💫.

<!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>{{ $title ?? config('app.name') }}</title>

        <link rel="shortcut icon" type="image/x-icon" href="{{ asset('favicon.svg') }}" />

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

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @fluxAppearance
    </head>
    <body class="min-h-screen bg-white dark:bg-zinc-800">
        <flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />

            <x-application-logo class="mr-4 h-8 w-auto" />

            <x-navigation />

            <flux:spacer />

            <livewire:components.date-time />

            <flux:dropdown position="top" align="start">
                <flux:button variant="ghost" icon-trailing="chevron-down">{{ auth()->user()->name }}</flux:button>
                <flux:menu class="space-y-2">
                    <flux:menu.item wire:navigate href="{{ route('profile') }}" icon="user">Profile</flux:menu.item>

                    <flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
                        <flux:radio value="light" icon="sun" />
                        <flux:radio value="dark" icon="moon" />
                        <flux:radio value="system" icon="computer-desktop" />
                    </flux:radio.group>

                    <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>
                </flux:menu>
            </flux:dropdown>
        </flux:header>

        <flux:sidebar
            stashable
            sticky
            class="border-r border-zinc-200 bg-zinc-50 lg:hidden dark:border-zinc-700 dark:bg-zinc-900"
        >
            <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />

            <x-navigation-mobile />

            <flux:spacer />

            <flux:navlist variant="outline">
                <flux:navlist.item icon="cog-6-tooth" href="#">Settings</flux:navlist.item>
                <flux:navlist.item icon="information-circle" href="#">Help</flux:navlist.item>
            </flux:navlist>
        </flux:sidebar>

        <flux:main container>
            <div>
                <div class="flex items-end justify-between">
                    @if (isset($pageTitle))
                        <flux:heading size="lg">{{ $pageTitle }}</flux:heading>
                    @endif

                    @if (isset($actions))
                        {{ $actions }}
                    @endif
                </div>
                @if (isset($pageTitle))
                    <flux:separator class="my-5" variant="subtle" />
                @endif
            </div>

            {{ $slot }}
        </flux:main>
        @persist('toast')
            <flux:toast />
        @endpersist

        @fluxScripts
    </body>
</html>

[jeffchown]

@jlarm And the view file?

[jlarm]

🤦‍♂️ Sorry again. There are a couple components I added from the docs that are in here just to test. Here is the view:

<div>
    <x-slot name="pageTitle">Create Dealership</x-slot>
    <form wire:submit.prevent="save">
        <div class="grid grid-cols-12 gap-5">
            <div class="col-span-8">
                <flux:card>
                    <div class="space-y-5">
                        <flux:field>
                            <flux:label badge="Required">Email</flux:label>

                            <flux:input type="email" required />

                            <flux:error name="email" />
                        </flux:field>
                        <flux:input wire:model="form.name" label="Name" badge="required" />
                        <flux:input wire:model="form.address" label="Address" />
                        <div class="grid grid-cols-3 gap-5">
                            <flux:input wire:model="form.city" label="City" />
                            <flux:select wire:model="form.state" label="State">
                                <flux:select.option></flux:select.option>
                                @foreach (App\Enum\State::cases() as $state)
                                    <flux:select.option :value="$state->value">{{ $state->label() }}</flux:select.option>
                                @endforeach
                            </flux:select>
                            <flux:input wire:model="form.zipCode" label="Zip Code" />
                        </div>
                        <div class="grid grid-cols-2 gap-5">
                            <flux:input
                                mask="999-999-9999"
                                placeholder="999-999-9999"
                                wire:model="form.phone"
                                label="Phone Number"
                            />
                            <flux:select wire:model="form.type" label="Type" badge="Required">
                                <flux:select.option></flux:select.option>
                                @foreach (App\Enum\Type::cases() as $type)
                                    <flux:select.option :value="$type->value">{{ $type->label() }}</flux:select.option>
                                @endforeach
                            </flux:select>
                            <flux:input wire:model="form.currentSolutionName" label="Current Solution Name" />
                            <flux:input wire:model="form.currentSolutionUse" label="Current Solution Use" />
                        </div>
                        {{-- <flux:textarea label="Notes" rows="auto" wire:model="form.notes" placeholder="Notes..." /> --}}
                        <flux:editor wire:model="form.notes" label="Notes" />
                    </div>
                </flux:card>
            </div>
            <div class="col-span-4">
                <flux:card>
                    <div class="space-y-5">
                        <flux:fieldset>
                            <flux:legend>Status</flux:legend>
                            <flux:switch
                                wire:model="form.dev"
                                label="In Development"
                                description="Turn on In Development when actively working on this dealership with the Sales Dev Rep."
                            />
                        </flux:fieldset>
                        <flux:separator class="my-5" variant="subtle" />
                        <flux:select
                            variant="listbox"
                            multiple
                            label="Consultants"
                            badge="required"
                            wire:model="form.selectedUsers"
                        >
                            @foreach ($this->users() as $user)
                                <flux:select.option :value="$user->id">{{ $user->name }}</flux:select.option>
                            @endforeach
                        </flux:select>
                        <flux:select label="Status" badge="required" wire:model="form.status">
                            <flux:select.option></flux:select.option>
                            @foreach (App\Enum\Status::cases() as $status)
                                <flux:select.option :value="$status->value">{{ $status->label() }}</flux:select.option>
                            @endforeach
                        </flux:select>
                        <flux:select label="Rating" badge="required" wire:model="form.rating">
                            <flux:select.option></flux:select.option>
                            @foreach (App\Enum\Rating::cases() as $rating)
                                <flux:select.option :value="$rating->value">{{ $rating->label() }}</flux:select.option>
                            @endforeach
                        </flux:select>
                        <div class="flex gap-x-2">
                            <flux:button type="submit" class="w-full" variant="primary">Create</flux:button>
                            <flux:button class="w-full">Cancel</flux:button>
                        </div>
                    </div>
                </flux:card>
            </div>
        </div>
    </form>
</div>