Слияние Laravel Tailwind

Laravel Tailwind Merge — это пакет, который автоматически разрешает конфликты классов CSS Tailwind в Laravel. Это позволяет объединить несколько классов Tailwind и разрешает конфликты.

Ниже приведен простой пример из файла README. Учитывая следующий код в компоненте blade:Ниже приведен пример использования с приведенным выше компонентом:

// circle.blade.php
<div {{ $attributes->twMerge('w-10 h-10 rounded-full bg-red-500') }}></div>

{{-- your-view.blade.php --}}
<x-circle class="bg-blue-500" />

{{-- Output --}}
<div class="w-10 h-10 rounded-full bg-blue-500"></div>

Вот еще несколько примеров из файла readme о внутренней работе методаmerge.circle Вы можете использовать предоставленный TailwindMerge фасад:Вы также можете использовать директиву @twMerge Blade:

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 --}}

Вы можете узнать больше об этом пакете, получить полные инструкции по установке и просмотреть исходный код на GitHub.