Weave Code
Twig Tailwind Extra Laravel Package
tales-from-a-dev/twig-tailwind-extra
Twig extension that adds Tailwind helpers to your templates. Includes a tailwind_merge() filter powered by tailwind-merge-php to intelligently combine Tailwind CSS class strings and resolve conflicts. Requires PHP 8.1+, Twig 3+, Tailwind 4+.
🌱 A Twig extension for Tailwind
Frequently asked questions about Twig Tailwind Extra
- How do I install this package in a Laravel project?
- Run `composer require tales-from-a-dev/twig-tailwind-extra` and ensure your project meets the requirements: PHP 8.1+, Twig 3+, and Tailwind CSS 4+. If using Laravel, register the Twig extension in your `AppServiceProvider` or via a custom service provider.
- What’s the difference between this and manually using Tailwind’s `merge` function?
- This package integrates `tailwind-merge-php` directly into Twig, letting you merge classes in templates (e.g., `{{ 'btn text-red-500'|tailwind_merge('hover:bg-blue-500') }}`). It handles edge cases like conflicting classes automatically, reducing manual logic in Blade/Twig.
- Does this work with Laravel Blade templates?
- Yes. Use the Twig extension with Blade via `@twig` directives or create custom Blade helpers. For example, `@twig(['btn', 'text-red-500']|tailwind_merge('hover:bg-blue-500'))` merges classes dynamically in Blade templates.
- Will this break if I upgrade Tailwind CSS?
- The package supports Tailwind 4+. If you upgrade to Tailwind 5+, verify compatibility with `tailwind-merge-php` v0.3. Test edge cases like custom variants or plugins, as the merge logic may behave differently with newer Tailwind versions.
- How does `tailwind_merge()` handle conflicting classes (e.g., `text-red-500 text-blue-500`)?
- The filter uses `tailwind-merge-php` to resolve conflicts by prioritizing the last class in the input array or string. For example, `{{ 'text-red-500'|tailwind_merge('text-blue-500') }}` outputs `text-blue-500`. Test with your project’s class combinations to confirm behavior.
- Can I use this for dynamic UI components like modals or dropdowns?
- Absolutely. The package excels at merging dynamic classes, such as merging base styles with hover/focus states. For example, `{{ ['btn', 'bg-blue-500']|tailwind_merge(hover='bg-blue-700') }}` generates `btn bg-blue-500 hover:bg-blue-700` intelligently.
- Are there performance concerns with merging classes in loops?
- The merge logic is optimized, but test in loops (e.g., rendering lists with dynamic classes). For heavy usage, cache merged results or use static classes where possible. Benchmark with tools like Laravel Debugbar to monitor runtime impact.
- What if `tailwind_merge()` fails? How do I debug errors?
- Wrap Twig calls in Blade’s `@error` directive or use Twig’s `{% if %}` to handle failures gracefully. Check the package’s GitHub issues for known edge cases. If errors persist, inspect the input classes for invalid Tailwind syntax or custom variants.
- Does this package support custom Tailwind themes or plugins?
- Yes, but test thoroughly. The merge logic relies on Tailwind’s default behavior, so custom themes or plugins might require adjustments. If conflicts arise, fork the package or extend `tailwind-merge-php` to support your setup.
- What alternatives exist for merging Tailwind classes in Laravel?
- Alternatives include manually using `tailwind-merge-php` in PHP logic or JavaScript libraries like `tailwind-merge`. This package offers a Twig-native solution, reducing boilerplate and integrating seamlessly with Laravel’s templating ecosystem.
Weaver
How can I help you explore Laravel packages today?