如何在TailwindCSS配置中设置正确的shadow-color使其渲染为RGB/RGBA格式

方案1：调整颜色定义格式（推荐） #

Tailwind 3+原生支持使用纯RGB通道值定义颜色，这种格式同时支持默认颜色调用和透明度拼接，是目前官方推荐的写法：

module.exports = {
  theme: {
    colors: {
      // 直接写红、绿、蓝三个通道的数值，不需要包裹rgb()
      primary: '255 0 0'
    },
    extend: {
      boxShadow: theme => ({
        // 直接插入通道值拼接rgba即可
        extra: `0 0 999px rgba(${theme('colors.primary')}, .25)`
      }),
    }
  }
}

这种写法还同时支持bg-primary/25这类自带透明度修饰符的工具类使用，不需要额外配置。

方案2：使用内置颜色解析工具转换 #

如果你不想修改已有颜色的定义（比如已经大量使用命名色、十六进制色值），可以调用Tailwind内置的颜色解析工具自动转成RGB通道：
首先在配置文件顶部引入解析工具：

const { parseColor } = require('tailwindcss/lib/util/color')

再修改配置逻辑：

module.exports = {
  theme: {
    colors: {
      primary: 'red'
    },
    extend: {
      boxShadow: theme => {
        // 解析已定义的颜色值，得到颜色对象
        const primaryColor = parseColor(theme('colors.primary'))
        // 提取RGB三个通道的数值拼接为字符串
        const rgbChannels = primaryColor.color.join(', ')
        return {
          extra: `0 0 999px rgba(${rgbChannels}, .25)`
        }
      },
    }
  }
}

该方法支持解析任意合法的CSS颜色格式（命名色、十六进制、HSL、RGB），不需要手动转换色值。

注意事项 #

原有写法存在两个问题：

1. theme()方法只能在配置的函数参数中调用，不能直接写在字符串内部，不会被自动解析
2. 示例代码末尾多了一个多余的右括号，会导致生成的CSS语法错误

内容的提问来源于stack exchange，提问作者Ihar Aliakseyenka