如何在自定义Tailwind类中使用Tailwind内置颜色系统

核心方案 #

借助Tailwind的主题配置能力，通过遍历内置颜色系统自动生成对应自定义阴影类，彻底告别手动逐个添加的低效操作。

步骤1：修改tailwind.config.js #

在theme.extend中用函数式配置dropShadow，自动关联所有Tailwind颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      dropShadow: ({ theme }) => {
        const customShadows = {};
        // 遍历所有Tailwind颜色
        Object.entries(theme('colors')).forEach(([colorKey, colorValue]) => {
          // 处理带色阶的颜色（如red-500）
          if (typeof colorValue === 'object') {
            Object.entries(colorValue).forEach(([shade, hex]) => {
              customShadows[`custom-${colorKey}-${shade}`] = `0 4px 6px -1px ${hex}, 0 2px 4px -1px ${hex}40`;
            });
          } else {
            // 处理单一值颜色（如black）
            customShadows[`custom-${colorKey}`] = `0 4px 6px -1px ${colorValue}, 0 2px 4px -1px ${colorValue}40`;
          }
        });
        return customShadows;
      },
    },
  },
  plugins: [],
};

步骤2：直接使用类名 #

配置完成后，就能直接用drop-shadow-custom-red-500、drop-shadow-custom-blue-200这类类名，效果和手动配置完全一致，且自动适配所有Tailwind内置颜色。

自定义调整 #

如果需要修改阴影的偏移、模糊度或透明度，直接调整配置里的阴影模板字符串即可，比如把0 4px 6px改成0 2px 8px来调整阴影大小。

内容的提问来源于stack exchange，提问作者もぐもぐぷりん