Laravel Tailwind Merge to pakiet, który automatycznie rozwiązuje konflikty klas CSS Tailwind w Laravel. Umożliwia to scalenie wielu klas Tailwind i rozwiązuje konflikty.
Oto podstawowy przykład z pliku README. Biorąc pod uwagę następujący kod w komponencie
// circle.blade.php
<div {{ $attributes->twMerge('w-10 h-10 rounded-full bg-red-500') }}></div>
blade:Oto przykład użycia z powyższym circle komponentem:
{{-- your-view.blade.php --}}
<x-circle class="bg-blue-500" />
{{-- Output --}}
<div class="w-10 h-10 rounded-full bg-blue-500"></div>
Oto kilka przykładów z pliku readme wewnętrznego działania merge metody. Możesz użyć dostarczonej TailwindMerge fasady:Możesz również użyć dyrektywy Blade:Możesz dowiedzieć się więcej o tym pakiecie, uzyskać pełne instrukcje instalacji i wyświetlić kod źródłowy w witrynie GitHub.You can use the provided façade:You can also use the Blade directive:You can also use the Blade directive:You can also use the @twMerge Blade directive:
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.@twMerge('w-10 h-10 rounded-full bg-red-500 bg-blue-500')
{{-- w-10 h-10 rounded-full bg-blue-500 --}}You can also learn more about this package, get full installation instructions, and view the source code on GitHub.
