livewire / flux

The official Livewire UI component library
428 stars 38 forks source link

Add mx-1 and rounded-t-md to search.blade.php #410

Closed dajoeberlei closed 2 days ago

dajoeberlei commented 3 days ago

Hi there,

sorry dunno how to contribute to the component because its not in the public repository. But the search blade that is being used in the <flux:select.search /> component needs a rounded-t-md and a px margin.

Without: (Current Flux State) Image

With: Image

I added the last line to the Flux::classes in my search.blade.php file:

@php
$classes = Flux::classes()
    ->add('h-10 w-full flex items-center px-3 py-2')
    ->add('font-medium text-sm text-zinc-800 dark:text-white')
    ->add('pl-9') // Make room for magnifying glass icon...
    ->add($closable ? 'pr-9' : '') // Make room for close button...
    ->add('outline-none')
    ->add('border-b border-zinc-200 dark:border-zinc-600')
    ->add('bg-white dark:bg-zinc-700')
    ->add('rounded-t-md mt-px mx-px') // add this line
    ;
@endphp
razvantirboaca commented 3 days ago

Hi! I solved this issue by not requiring @tailwindcss/forms anymore. It's not a Flux thing, it's css coming from the plugin.

dajoeberlei commented 3 days ago

@razvantirboaca oh interesting. I haven't thought it through completely yet, but I guess you can argue that if you fully rely on flux, that tailwind forms is never necessarily needed right?

razvantirboaca commented 3 days ago

@dajoeberlei yes, exactly! That's my thinking as well :)