Daisylw4 Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require edumicro/daisylw4
   npm install daisyui
   

   Add DaisyUI to your tailwind.config.js:

   plugins: [require("daisyui")],
   

2. First Use Case Create a Livewire component (php artisan make:livewire ExampleComponent) and use DaisyUI classes directly in Blade:

   <div class="btn btn-primary">Click Me</div>
   

   Or integrate with Livewire’s built-in styling:

   <x-daisy-btn wire:click="action" class="btn-success">Success</x-daisy-btn>
   

3. Key Files to Review

   • resources/views/vendor/daisylw4/ (default component views)
   • config/daisylw4.php (theme customization)
   • app/Providers/DaisyLw4ServiceProvider.php (service provider for extensions)

Implementation Patterns

1. Component Integration

• Livewire Components Extend DaisyLw4Component for themed Livewire components:

  use EduMicro\DaisyLw4\Traits\DaisyLw4Component;
  
  class ThemedButton extends Component {
      use DaisyLw4Component;
  
      public function render() {
          return view('livewire.themed-button', [
              'classes' => 'btn btn-ghost',
          ]);
      }
  }
  

• Blade Directives Use @daisyTheme('dark') in layouts to switch themes dynamically:

  @daisyTheme('dark')
  <div class="card">...</div>
  

2. Theming Workflow

• Global Theme Set in config/daisylw4.php:

  'theme' => 'light', // or 'dark', 'cupcake', etc.
  

• Per-Component Overrides Pass theme as a prop:

  <x-daisy-card theme="dark">...</x-daisy-card>
  

3. Custom Components

• Create a New Component Publish views and extend:

  php artisan vendor:publish --tag=daisylw4-views
  

  Then modify resources/views/vendor/daisylw4/components/example.blade.php.

• Register Custom Components Override the service provider’s boot() method:

  public function boot() {
      DaisyLw4::addComponent('custom-alert', CustomAlert::class);
  }
  

4. Livewire + DaisyUI Forms

• Styling Forms Use DaisyUI classes with Livewire’s wire:model:

  <input wire:model="name" class="input input-bordered" placeholder="Name">
  <x-daisy-error :message="$errors->first('name')" />
  

• Validation States Dynamically apply classes:

  public function updated($property) {
      $this->addClass('input-error', $this->errors->has($property));
  }
  

Gotchas and Tips

Pitfalls

1. Theme Conflicts

   • DaisyUI’s dark theme may clash with Tailwind’s dark: variants. Use data-theme="dark" instead of Tailwind’s dark mode for consistency.
   • Fix: Disable Tailwind dark mode if using DaisyUI themes:

     // tailwind.config.js
     darkMode: false,
     

2. Livewire Class Binding

   • DaisyUI classes (e.g., btn-primary) won’t update dynamically if bound to Livewire props. Use wire:class for conditional styling:

     <button wire:class="btn {{ $isActive ? 'btn-primary' : 'btn-secondary' }}">
     

3. Component Registration

   • Custom components must be registered before Livewire boots. Add to AppServiceProvider@boot():

     DaisyLw4::registerComponents();
     

Debugging

• Inspect Rendered Classes Use browser dev tools to verify DaisyUI classes are applied. Missing classes often indicate:

  • Incorrect Tailwind/DaisyUI setup.
  • Livewire’s wire:class not updating (check for typos in prop names).

• Clear Caches After publishing views or config:

  php artisan view:clear
  php artisan config:clear
  

Tips

1. Partial Theming Use data-theme on parent containers to scope themes:

   <div data-theme="dark">
       <x-daisy-card>...</x-daisy-card>
   </div>
   

2. Component Props Pass arbitrary classes via props:

   <x-daisy-btn wire:click="save" :classes="['btn-wide', 'btn-outline']" />
   

3. Extend DaisyUI Customize DaisyUI’s config in tailwind.config.js:

   daisyui: {
       themes: [
           {
               light: {
                   ...require("daisyui/src/theming/themes")["light"],
                   "primary": "#3b82f6",
               },
           },
       ],
   },
   

4. Livewire 4 Compatibility

   • Ensure laravel/livewire is ^4.0. Use wire:model.live for real-time updates:

     <input wire:model.live="search" class="input">
     

5. Performance

   • Lazy-load DaisyUI JS if not needed:

     // tailwind.config.js
     plugins: [require("daisyui")({ themes: false })],
     

   • Then manually include only required themes via CDN or local files.