如何在自定义顺风类上使用顺风的颜色

Question

我创建了自定义 dropShadow 类。 我想让它使用 Tailwind 的颜色系统，例如

red-500

blue-200

。

当前我的配置：

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      dropShadow: {
        /* Adding all color I need is take so long!!! so I wanna use Tailwind's Color e.g red-500 blue-200 */
        'custom-red': '0 4px 6px rgba(255, 0, 0, 0.5)',
        'custom-green': '0 4px 6px rgba(0, 255, 0, 0.5)',
        'custom-blue': '0 4px 6px rgba(0, 0, 255, 0.5)',
      },
    },
  },
  plugins: [],
}

我的目标是像这样使用它：

<div class="drop-shadow-custom-red-500 p......"></div>
<div class="drop-shadow-custom-purple-600 p......"></div>
<div class="drop-shadow-custom-blue-200 p......"></div>

我知道我可以在需要时简单地将每种颜色添加到配置中。 但如果我能用顺风的颜色来代替，那就更有用了。

Answer 1

在 tailwind.config.js 文件中，您可以使用插件来达到您想要的结果。您可以使用以下代码：-

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

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },

  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          "drop-shadow-custom": (value) => ({
            filter: `drop-shadow(20px 20px 20px ${value})`,
          }),
        },
        {
          values: flattenColorPalette(theme("colors")),
          type: "color",
        }
      );
    }),
  ],
};