Отложенная загрузка цветовых переменных не определена в Tailwind CSS и в Chrome DevTools. ⇐ CSS

[Гость]

Я пытаюсь лениво загрузить некоторые переменные CSS (в основном цвета), которые будут использоваться Tailwind CSS.

Это часть моего файла tailwind.config.js:
Тема
: { продлевать: { цвета: { обычай: { color1: 'var(--color-1)' } }, Это файл colors.css, который загружается при загрузке страницы в рабочей среде. Это не часть сборки:

:root { --color-1: #ff0000; } И когда я запускаю свой проект, я вижу, что colors.css загружен, и я вижу, что к элементу HTML применены эти стили (через скомпилированные стили Tailwind): #some-element { цвет фона: var(--color-1) !important; } Однако, когда я наводю курсор на var(--color-1), Chrome DevTools сообщает мне, что переменная не определена.

Что мне делать?