重定义Tailwind主题颜色而非扩展时，fill-current工具类失效问题

在Tailwind CSS中，若直接重定义整个主题调色板颜色，而非使用extend扩展，会导致fill-current工具类失效。

示例HTML代码 #

<p class="text-custom-red">
Hi
<svg
    class="fill-current"
    width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
>
    <path
        d="M12.0016 ..."
    />
</svg>
</p>

正常生效的配置（使用extend扩展颜色） #

当通过extend扩展自定义颜色时，SVG图标会正常继承父元素的红色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-red': '#fa364a',
      },
    },
  },
  plugins: [],
}

导致失效的配置（直接覆盖调色板） #

若直接覆盖整个theme.colors，fill-current工具类会失效，图标会显示为黑色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      'custom-red': '#fa364a',
    },
  },
  plugins: [],
}

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