代码之家  ›  专栏  ›  技术社区  ›  もぐもぐぷりん

如何在自定义顺风课程中使用顺风颜色

  •  -1
  • もぐもぐぷりん  · 技术社区  · 8 月前

    我创建了自定义dropShadow类。 我想让它使用顺风的颜色系统,比如 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>
    

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

    1 回复  |  直到 8 月前
        1
  •  1
  •   Nawaraj Bista    8 月前

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