通过 
搜索
搜索baethon / tailwind-class-collapse
折叠 Tailwind CSS 类列表
v1.0.0
2020-03-13 18:52 UTC
Requires
- php: >=7.4
Requires (Dev)
- phpunit/phpunit: ^9.0
- squizlabs/php_codesniffer: ^3.5
This package is auto-updated.
Last update: 2024-09-24 22:31:38 UTC
README
baethon/tailwind-class-collapse
移除 Tailwind 类名，保留同一类型的最右侧类名。
安装
composer require baethon/tailwind-class-collapse
使用
use function Baethon\Tailwind\class_collapse as tailwind_class_collapse; $class = tailwind_class_collapse('shadow font-bold text-gray-700 py-2 px-4 rounded text-center inline-block focus:shadow-outline focus:outline-none bg-blue-500 text-white hover:bg-blue-400'); // shadow font-bold py-2 px-4 rounded text-center inline-block focus:shadow-outline focus:outline-none bg-blue-500 text-white hover:bg-blue-400
为什么需要折叠？
我将通过一个示例来说明。考虑以下 代码片段
<button class="shadow font-bold text-gray-700 py-2 px-4 rounded text-center inline-block focus:shadow-outline focus:outline-none bg-blue-500 text-white hover:bg-blue-400" type="submit">Sign In</button>
如您所见，text-white 没有正确应用。它被 text-gray-700 覆盖。要修复这个问题，您需要移除 text-gray-700 类。
简单吗？好吧，当您有一个基于一组谓词追加一些类的解决方案时，事情会变得复杂。为了避免这个问题，您应该设置条件语句，使简单的事情复杂化。
它是如何工作的？
class_collapse() 根据目的（或大多数情况下，根据它们设置的 CSS 属性）对 Tailwind 类进行分组。它通过空格拆分类列表，并仅保留相同类型的最右侧类。该软件包支持 Tailwinds 伪类变体。
支持的 Tailwind 版本
目前，该软件包仅支持 Tailwind v1.2。可以添加其他版本的类定义，但我目前没有这个打算。如果您想添加对其他 Tailwind 版本的支持，请随时提交 PR。
测试
composer test