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

[Anonymous]

Tailwind V4 значительно значительно изменил дизайн Light/Dark Theme из -за удаления Tailwind.config.js file.
in tailwind v3 Вот как я изменил пользовательские свойства CSS в зависимости от темы : < /p>

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

@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 .
i прочитали документы и попытались использовать их для получения того же результата, например: (это не работает)

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

@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