主页 / coding / 问题 / 79298663
Accepted
もぐもぐぷりん
Asked: 2024-12-21 08:14:06 +0800 CST

如何在自定义 Tailwind 类中使用 Tailwind 的颜色

  • 772

我已经创建了自定义 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>

我知道我可以根据需要简单地将每种颜色添加到配置中。但如果我可以使用 tailwind 的颜色，它会更有用。

tailwind-css

1 个回答

  1. Best Answer

    在 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",
        }
      );
    }),
  ],
};
    • 2

相关问题