延迟加载的颜色变量未在 Chrome DevTools 的 Tailwind CSS 中定义

问：

其最小可重现示例，未加载颜色变量

我正在尝试懒惰地加载一些 CSS 变量（主要是颜色）以供 Tailwind CSS 使用。

这是我文件的一部分：tailwind.config.js

    theme: {
        extend: {
            colors: {
                custom: {
                    color1: 'var(--color-1)'
                }
            },

这是在生产环境中加载页面时加载的文件。它不是构建的一部分：colors.css

:root {
    --color-1: #ff0000;
}

当我运行我的项目时，我可以看到它被加载了，我可以看到 HTML 元素应用了这些样式（通过 Tailwind 的编译样式）：colors.css

#some-element {
    background-color: var(--color-1) !important;
}

然而，当我将鼠标悬停在 Chrome 上时，DevTools 告诉我变量未定义。var(--color-1)

我该怎么办？