Tailwind CSS V4 @Apply не работает должным образом с переменными темы ⇐ CSS

[Anonymous]

Я только начал использовать Tailwind CSS V4 и пытаюсь сделать многоразовый компонент пользовательского интерфейса с React JS. Но я получаю ошибки, такие как: < /p>

Код: Выделить всё

Cannot apply unknown utility class `text-brand-secondary-800

, который я определил в app.css file.
Вот мой app.css

Код: Выделить всё

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
scroll-behavior: smooth;
font-family: "Poppins", sans-serif;
}

@import "tailwindcss";

@theme {
--color-brand-secondary-800: #121212;

/* rest of the variables */
}

Вот мой component.css :

Код: Выделить всё

  @reference "tailwindcss";

.component-header-text {
@apply font-semibold text-base text-brand-secondary-800;
}

Все другие классы по умолчанию, такие как BG-Gray-200 , работают нормально, но переменные темы. Если у вас есть какие -либо альтернативы, они оценены. Спасибо заранее!

Подробнее здесь: https://stackoverflow.com/questions/797 ... -variables