我使用上下文中的应用程序中具有主题更改功能。主题（黑暗/光）类正在应用，但颜色不会改变。我不知道这是否是我的尾风配置，因为当我尝试在标题中键入“ BG-primary”时，AutoComplete不会显示主var，否则是themecontextlogic.

Question

import { ReactElement } from "react";
import { useTheme } from "../../hooks/useTheme";
import { Sun, Moon } from "lucide-react";

function ThemeToggler(): ReactElement {
    const { theme, setTheme } = useTheme();

    function toggleTheme() {
        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
    }
    return theme === "light" ? (
        <Moon onClick={toggleTheme} />
    ) : (
        <Sun onClick={toggleTheme} />
    );
}

export default ThemeToggler;

uusetheme.tsx

import { useContext } from "react";
import { ThemeContext } from "../Contexts/ThemeContext";

export const useTheme = () => {
    const context = useContext(ThemeContext);
    if (!context) {
        throw new Error("useTheme deve ser usado dentro de um ThemeProvider");
    }
    return context;
};

header.tsx

import { ReactElement } from "react";
import ThemeToggler from "../ui/ThemeToggler";

function Header(): ReactElement {
    return (
        <header
            className={
                "flex h-20 w-svw items-center justify-between px-4 text-xl"
            }
        >
            <div>
                <h1>CashierApp</h1>
            </div>
            <div>
                <nav>
                    <ul className="flex flex-row items-center gap-8">
                        <li>Home</li>
                        <li>Controle de caixa</li>
                        <li>Cadastros</li>
                    </ul>
                </nav>
            </div>
            <div>
                <ThemeToggler />
            </div>
        </header>
    );
}

export default Header;

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./index.html", "./src/**/*.{html,js,jsx,ts,tsx}"],
    theme: {
        extend: {
            colors: {
                primary: "var(--color-bg-primary)",
                secondary: "var(--color-bg-secondary)",
                textPrimary: "var(--color-text-primary)",
                textSecondary: "var(--color-text-secondary)",
                textAccent: "var(--color-text-accent)",
            },
        },
    },
    plugins: [],
};

Edit：我正在使用parwindcss v4，我的CSS文件具有以下语句：

@导入“ tailwindcss”;

@tailwind实用程序;

tailwindcssv4

的CSS优先配置

由于您正在使用V4，因此您不需要

tailwind.config.js

文件；相反，您应该使用CSS优先指令。

CSS-优先配置

-TailWindcss V4Blog

Answer 1

功能和指示

-TailWindCSS V4Docs

v4

中的新配置选项 - stackoverflow

• 在CSS优先，您可以使用@theme
指令定义自定义样式。

• @import "tailwindcss";
  
  @theme {
    --font-display: "Satoshi", "sans-serif";
    --breakpoint-3xl: 120rem;
    --color-avocado-100: oklch(0.99 0 0);
    --color-avocado-200: oklch(0.98 0.04 113.22);
    --color-avocado-300: oklch(0.94 0.11 115.03);
    --color-avocado-400: oklch(0.92 0.19 114.08);
    --color-avocado-500: oklch(0.84 0.18 117.33);
    --color-avocado-600: oklch(0.53 0.12 118.34);
    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
    /* ... */
  }

• @theme指令
-TailWindcss v4docs

theme变量在命名空间中定义，每个命名空间对应于一个或多个实用程序类或变体API。

theme变量命名空间 - tailwindcss v4docs

default主题变量参考 -  tailwindcss v4docs

• 如何使用基于遗产JavaScript的配置

  ，但是，仍然可以继续通过

  tailwind.config.js指令继续使用
@config

。

tailwindcss v4向后兼容V3

-StackoverFlow

相关：
tailwindcss v4中发生了什么变化？