Laravel Tailwind Merge

Laravel Tailwind Merge 是一个软件包，它可以在 Laravel 中自动解决 Tailwind CSS 类冲突。这使您能够合并多个 Tailwind 类并解决冲突。

以下来自 README 的基本示例。在 blade 组件中使用以下代码

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

以下使用上面 circle 组件的示例

{{-- your-view.blade.php --}}
<x-circle class="bg-blue-500" />
 
{{-- Output --}}
<div class="w-10 h-10 rounded-full bg-blue-500"></div>

以下是一些来自 merge 方法的内部机制的 readme 中的示例。您可以使用提供的 TailwindMerge 门面

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 Blade 指令

@twMerge('w-10 h-10 rounded-full bg-red-500 bg-blue-500')
{{-- w-10 h-10 rounded-full bg-blue-500 --}}

您可以在 GitHub 上了解有关此软件包的更多信息，获取完整安装说明并查看 源代码。