Laravel Tailwind Merge
Laravel Tailwind Merge là một gói mở rộng giúp tự động giải quyết xung đột lớp Tailwind CSS trong Laravel. Điều này cho phép bạn kết hợp nhiều lớp Tailwind và giải quyết các xung đột.
Dưới đây là một ví dụ cơ bản từ tệp README. Cho đoạn mã sau trong blade component:
// circle.blade.php
<div {{ $attributes->twMerge('w-10 h-10 rounded-full bg-red-500') }}></div>
Dưới đây là một ví dụ về cách sử dụng với circle component:
{{-- your-view.blade.php --}}
<x-circle class="bg-blue-500" />
{{-- Output --}}
<div class="w-10 h-10 rounded-full bg-blue-500"></div>
Đây là một số ví dụ khác từ tệp readme về cách hoạt động của phương thức merge. Bạn có thể sử dụng đối tượng TailwindMerge đã được cung cấp:
use TailwindMerge\Laravel\Facades\TailwindMerge;
// block and inline are conflicting; The last rule wins.
TailwindMerge::merge('block inline'); // inline
// px-6 overrides pl-4
TailwindMerge::merge('pl-4 px-6'); // px-6
// with breakpoints
TailwindMerge::merge('h-10 lg:h-12 lg:h-20'); // h-10 lg:h-20
// dark mode
TailwindMerge::merge('text-black dark:text-white dark:text-gray-700');
// text-black dark:text-gray-700
// etc.
Bạn cũng có thể sử dụng @twMerge Blade directive như sau:
@twMerge('w-10 h-10 rounded-full bg-red-500 bg-blue-500')
{{-- w-10 h-10 rounded-full bg-blue-500 --}}
Bạn có thể tìm hiểu thêm về gói này, nhận hướng dẫn cài đặt đầy đủ và xem mã nguồn trên GitHub.