tailwind-merge-php

PHP版TailwindMerge

PHP版TailwindMerge允许你合并多个Tailwind CSS类，并通过移除与后定义的类冲突的类来自动解决类之间的冲突。

这是dcastil开发的tailwind-merge的PHP移植版。

支持Tailwind v3.0至v3.4版本。

如果你觉得这个包有帮助，请考虑赞助维护者：

Sandro Gehri：github.com/sponsors/gehrisandro

如果你正在使用Laravel，可以使用Laravel版TailwindMerge

开始使用

需要PHP 8.1+

首先，通过Composer包管理器安装TailwindMerge：

composer require gehrisandro/tailwind-merge-php

然后，使用TailwindMerge类来合并你的Tailwind CSS类：

use TailwindMerge\TailwindMerge;

$tw = TailwindMerge::instance();

$tw->merge('text-red-500', 'text-blue-500'); // 'text-blue-500'

你可以通过使用工厂方法来调整TailwindMerge的配置，创建一个新实例：

use TailwindMerge\TailwindMerge;

$instance = TailwindMerge::factory()
    ->withConfiguration([
        'prefix' => 'tw-',
    ])->make();

$instance->merge('tw-text-red-500', 'tw-text-blue-500'); // 'tw-text-blue-500'

有关如何配置TailwindMerge的更多信息，请参阅配置部分。

使用方法

TailwindMerge不仅能够解决基本Tailwind CSS类之间的冲突，还能处理更复杂的场景：

use TailwindMerge\TailwindMerge;

$tw = TailwindMerge::instance();

// 冲突的类
$tw->merge('block inline'); // inline
$tw->merge('pl-4 px-6'); // px-6

// 非冲突的类
$tw->merge('text-xl text-black'); // text-xl text-black

// 带断点的类
$tw->merge('h-10 lg:h-12 lg:h-20'); // h-10 lg:h-20

// 暗黑模式
$tw->merge('text-black dark:text-white dark:text-gray-700'); // text-black dark:text-gray-700

// 带悬停、焦点和其他状态
$tw->merge('hover:block hover:inline'); // hover:inline

// 带重要修饰符
$tw->merge('!font-medium !font-bold'); // !font-bold

// 任意值
$tw->merge('z-10 z-[999]'); // z-[999] 

// 任意变体
$tw->merge('[&>*]:underline [&>*]:line-through'); // [&>*]:line-through

// 非Tailwind类
$tw->merge('non-tailwind-class block inline'); // non-tailwind-class inline

可以将类作为字符串、数组或两者的组合传递：

$tw->merge('h-10 h-20'); // h-20
$tw->merge(['h-10', 'h-20']); // h-20
$tw->merge(['h-10', 'h-20'], 'h-30'); // h-30
$tw->merge(['h-10', 'h-20'], 'h-30', ['h-40']); // h-40

缓存

为了提高性能，TailwindMerge可以缓存合并操作的结果。要激活缓存，请将你的缓存实例传递给withCache方法。

它接受任何兼容PSR-16的缓存实现。

TailwindMerge::factory()
  ->withCache($cache)
  ->make();

当你对配置进行更改时，请确保清除缓存。

配置

如果你使用Tailwind CSS时没有任何额外配置，你可以直接使用TailwindMerge。到这里就可以停止阅读了。

如果你使用自定义Tailwind配置，你可能需要配置TailwindMerge以正确合并类。

默认情况下，如果你的Tailwind配置满足以下所有条件，TailwindMerge的配置方式使你仍然可以使用它：

只使用不与其他Tailwind类名冲突的颜色名称
只在基于数字的Tailwind类中偏离数值
只使用不与默认字体粗细类冲突的字体系列类
其他方面都遵循默认的Tailwind配置

如果其中一些条件不适用于你，你需要自定义配置。

这是一个添加自定义字体大小"very-large"的示例：

TailwindMerge::factory()->withConfiguration([
        'classGroups' => [
            'font-size' => [
                ['text' => ['very-large']]
            ],
        ],
    ])->make();

有关配置选项的更详细说明，请访问原始包文档。