Изменение значения пользовательского свойства CSS в зависимости от темы в Tailwind v4 ⇐ CSS

[Anonymous]

В Tailwind v4 существенно изменился дизайн светлой/темной темы из-за удаления файла Tailwind.config.js.
В Tailwind v3 я изменил пользовательские свойства CSS в зависимости от темы. :

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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 4%;
--foreground: 0 0% 98%;
}
.dark {
--background: 0 0% 98%;
--foreground: 0 0% 4%;
}
}

Однако в Tailwind v4 были введены ключевые слова @theme, @variant и @custom-variant.
Я прочитали документацию и попытались использовать ее для получения того же результата, например: (Это НЕ работает)

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

@import "tailwindcss";
@import "@fontsource-variable/montserrat";

@theme {
--color-foreground: 0 0% 8%;
--color-background: 0 0% 98%;
}

@custom-variant dark (&:where(.dark, .dark *));

@variant dark {
@theme {
--color-foreground: 0 0% 98%;
--color-background: 0 0% 3.9%;
}
}

Как правильно это сделать в Tailwind v4?
Добавление документации по пользовательским вариантам

Подробнее здесь: https://stackoverflow.com/questions/793 ... ailwind-v4