Tdall Laravel Package

Getting Started

Minimal Setup Steps

1. Install via Composer

   composer require yhif/tdall
   

2. Publish Assets

   php artisan tdall:install
   

   • This copies the default layout, Vite config, and Tailwind/DaisyUI setup.
3. Configure Vite Ensure your vite.config.js includes the TDALL preset:

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import { tdall } from 'yhif/tdall';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'],
               refresh: true,
           }),
           tdall(),
       ],
   });
   

4. First Use Case: Theme Switcher Add the theme switcher component to your main layout (resources/views/layouts/app.blade.php):

   <x-theme-switcher />
   

   • Users can now toggle between daisyUI themes (e.g., light, dark, cupcake).

Implementation Patterns

Core Workflows

1. Layout Inheritance Extend the default layout (resources/views/layouts/app.blade.php) for all views:

   @extends('layouts.app')
   

   • Includes Alpine.js, Tailwind, and daisyUI by default.

2. DaisyUI Theme Management

   • Global Theme: Set in tailwind.config.js:

     module.exports = {
         daisyui: {
             themes: ['light', 'dark'], // Enable/disable themes
         },
     };
     

   • Per-Page Overrides: Use Alpine.js to toggle themes dynamically:

     <button x-on:click="document.documentElement.classList.toggle('dark')">
         Toggle Dark Mode
     </button>
     

3. Livewire + Alpine Integration

   • Use Alpine.js for lightweight interactivity (e.g., modals, tooltips).
   • Offload complex logic to Livewire components (e.g., forms, real-time updates).
   • Example: Combine Alpine for UI state and Livewire for backend logic:

     <div x-data="{ open: false }">
         <button @click="open = true">Open Modal</button>
         <livewire:modal x-show="open" @close="open = false" />
     </div>
     

4. Pagination Views Replace default Laravel pagination with daisyUI-styled views:

   {{ $posts->links('vendor.pagination.daisyui') }}
   

   • Ensure the view exists at resources/views/vendor/pagination/daisyui.blade.php.

5. Asset Compilation

   • Run Vite dev server:

     npm run dev
     

   • Build for production:

     npm run build
     

Integration Tips

• Tailwind Directives: Use @apply sparingly; prefer utility classes for consistency.
• Alpine Magic Methods: Leverage x-transition, x-collapse, and x-cloak for smooth animations.
• Livewire + Alpine: Use wire:ignore for Alpine-managed elements to avoid conflicts:

  <div x-data="{ ... }" wire:ignore>
      <!-- Alpine-only content -->
  </div>
  

Gotchas and Tips

Pitfalls

1. Theme Conflicts

   • DaisyUI themes may override Tailwind base styles. Test themes in isolation:

     npm run dev -- --theme dark
     

   • Fix: Explicitly extend themes in tailwind.config.js:

     daisyui: {
         themes: [
             {
                 light: { ... },
                 dark: { ... },
             },
         ],
     },
     

2. Vite Hot Module Replacement (HMR)

   • HMR may not work if Vite’s refresh plugin isn’t configured. Ensure:

     laravel({
         refresh: true, // Critical for Livewire + Vite
     }),
     

3. Livewire + Alpine Event Bubbling

   • Alpine events (e.g., @click) may not trigger Livewire wire:model updates. Use:

     <input x-model="formInput" wire:model="formInput">
     

   • Debug: Check browser console for Alpine/Livewire conflicts.

4. Missing DaisyUI Views

   • If pagination views are missing, publish them:

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

Debugging

• Tailwind Classes Not Applying:

  • Verify app.css imports Tailwind and DaisyUI:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    @import 'daisyui/src/daisyui.css';
    

  • Clear Vite cache:

    npm run dev -- --force
    

• Theme Switcher Not Working:

  • Ensure the component is included after Alpine.js is loaded in the layout.
  • Check for JavaScript errors in the console.

Extension Points

1. Custom DaisyUI Themes

   • Extend themes in tailwind.config.js:

     daisyui: {
         themes: [
             {
                 mytheme: {
                     'primary': '#3b82f6',
                     'secondary': '#10b981',
                 },
             },
         ],
     },
     

2. Alpine Plugins

   • Register custom Alpine plugins in resources/js/app.js:

     import { initThemeSwitcher } from 'yhif/tdall';
     initThemeSwitcher();
     

3. Livewire Component Styling

   • Scope Livewire styles to avoid conflicts:

     .livewire-dark .dark { /* Dark mode styles */ }
     

4. Vite Optimization

   • Preload critical assets in vite.config.js:

     defineConfig({
         plugins: [
             laravel({
                 input: ['resources/css/app.css', 'resources/js/app.js'],
                 refresh: true,
                 preload: true, // Preload assets
             }),
         ],
     }),