如何编写将调色板颜色作为可选参数的 Tailwind 类插件

Question

我有这样的风格：

box-shadow: 0 0 0 100px white inset;

但我不想white硬编码 - 我想在我的tailwind.config.js调用中创建一个 Tailwind 插件bg-shadow，它接受颜色作为可选的第三个参数，如下所示：

<input class="bg-shadow" /> <!-- defaults to white -->
<input class="bg-shadow-primary-500" />  <!-- specify the colour -->

阅读了有关插件的 Tailwind 文档后，我对如何实现这一目标一无所知！

Answer 1

您可以通过使用matchUtilities和的一个非常简单的插件来完成此操作flattenColorPalette。

在tailwind.config.js：

const plugin = require("tailwindcss/plugin");
const { default: flattenColorPalette } = require("tailwindcss/lib/util/flattenColorPalette");

module.exports = {
  ...
  plugins: [
    plugin(({ matchUtilities, theme }) => {
      matchUtilities(
        {
          "bg-shadow": (value) => ({
            boxShadow: `0 0 0 100px ${value} inset`
          })
        },
        { 
          values: flattenColorPalette(theme("colors")), 
          type: "color" 
        }
      );
    })
  ]
};