README

Kirby Tailwind Merge

智能合并 Tailwind 类，避免在 Kirby 模板中出现样式冲突。

此插件依赖于 Sandro Gehri 的 tailwind-merge-php 进行类合并，并仅将其适配到 "Kirby 生态系统" 中。有关类合并相关的问题，可能需要在那里报告。

安装

composer require tobimori/kirby-tailwind-merge

手动安装

下载并复制此仓库到 /site/plugins/kirby-tailwind-merge，或将其作为 Git 子模块应用。

使用

此插件提供两个辅助函数，可在您的蓝图中使用。是否注册函数可以在您的 config.php 中控制，请参阅选项。

`attr()`

此辅助函数与 Kirby 内置的 attr() 函数类似，并覆盖它以支持 class 属性的 Tailwind Merge 行为。

您需要在 index.php 文件的顶部位置禁用内置的 attr() 辅助函数 - 在 Kirby 加载之前。

define("KIRBY_HELPER_ATTR", false);

示例

// site/snippets/component.php
<div <?= attr(['class' => ['h-full w-full bg-neutral-100', $class], 'data-attr' => 'hello world!']) ?>>[...]</div>

// site/templates/default.php
<?php snippet('component', ['class' => 'w-1/2']) ?>

// output
<div class="w-1/2 h-full bg-neutral-100" data-attr="hello world!">[...]</div>

`merge()`

merge() 应用 Tailwind Merge 行为并输出类属性。

示例

// site/snippets/component.php
<div <?= merge('h-full w-full bg-neutral-100', $class) ?>>[...]</div>

// site/templates/default.php
<?php snippet('component', ['class' => 'w-1/2']) ?>

// output
<div class="w-1/2 h-full bg-neutral-100">[...]</div>

`cls()`

cls() 应用 Tailwind Merge 行为并输出类属性的值。这可以用于更好地使用此插件提供的条件合并语法，也可以用于嵌套。

示例

// site/snippets/blocks/simple-text.php
<div class="<?= cls([
        'bg-neutral-white',
        'py-32' => true,
        cls([
            'px-16' => $block->type() !== 'simple-text',
            'px-8' => $block->type() === 'centered-text'
        ]) => $page->intendedTemplate() == 'home'
    ]); ?>">[...]</div>

// site/templates/home.php
// output
<div class="px-16 py-32 bg-neutral-white">[...]</div>

// site/templates/article.php
// output
<div class="py-32 bg-neutral-white">[...]</div>

条件合并

此条件合并语法（使用数组）可用于 merge() 和 attr() 函数。

<div <?= merge([
        'bg-neutral-white', // always applied if no condition is present
        'py-32' => true, // always applied, because condition is true
        cls([ // this works like an "AND", ANY entries in cls function will only be applied if the condition is true, this results in...
            'px-16' => $block->type() !== 'simple-text', // applied when block type is not 'simple-text', but intendedTemplate is 'home'
            'px-8' => $block->type() === 'centered-text' // applied when block type is 'centered-text' and intendedTemplate is 'home', also replaces 'px-16' from above
        ]) => $page->intendedTemplate() == 'home' // "parent" AND condition
    ]) ?>>[...]</div>

`mod($modifier, $classes)`

mod() 将指定的修饰符/变体应用到 $class 字符串中提供的每个类。它还应用 Tailwind Merge 行为并输出类属性的值。当您有一系列类并且希望它们在相同的修饰符下激活时，这非常有用。

示例

<div class="flex mb-4 <?= mod('lg', 'mb-2 flex-col') ?>">[...]</div>

// output
<div class="flex mb-4 lg:mb-2 lg:flex-col">[...]</div>

"但是 Tailwind 不会解析我的类！"

我听到了您的意见，但幸运的是，Tailwind 允许我们根据我们的需求自定义解析器。由于依赖于对类的正则表达式匹配，这不是一种 100% 完美的技术，但它在大多数情况下都有效。

使用自定义的转换函数来扫描 mod() 函数，您的 tailwind.config.js 可能看起来像这样

module.exports = {
  content: {
    files: ["./site/**/*.php", "./src/index.js"],
    transform: (code) => {
      const variantGroupsRegex = /mod\(.([^,"']+)[^\[]+["'](.+)["']\)/g
      const variantGroupMatches = [...code.matchAll(variantGroupsRegex)]

      variantGroupMatches.forEach(([matchStr, variants, classes]) => {
        const parsedClasses = classes
          .split(" ")
          .map((cls) => `${variants}:${cls}`)
          .join(" ")

        code = code.replaceAll(matchStr, parsedClasses)
      })

      return code
    }
  },
  theme: {
    extend: {}
  },
  plugins: []
}

为了简化 Tailwind 中的函数解析，mod() 函数不支持数组。使用这种方法，您也不能在函数中使用变量，例如来自 CMS 的变量，而只能直接使用字符串。

如果您仍然想使用变量，例如来自 CMS 的变量，您可以将生成的类添加到您的 safelist 中，它们将无论如何生成。

选项

选项允许您微调插件的行为。您可以在您的 config.php 文件中设置它们

return [
    'tobimori.tailwind-merge' => [
        'prefix' => 'tw-',
    ],
];

支持

本插件免费提供，并按照宽松的MIT许可证发布。如果您将其用于商业项目，请考虑在GitHub上赞助我，以支持插件进一步开发和持续维护。

tobimori / kirby-tailwind-merge

维护者

详细信息