React中无法将Context变量作为Tailwind CSS的className传入怎么办？

在React项目中，尝试将Context中的颜色变量传入Tailwind CSS的className属性。按照Tailwind官方文档的bg-[hex-val]语法，使用模板字符串拼接Context里的colors.secondary值，但对应的样式完全不生效；尝试用classNames包合并类名也没有效果。相关代码如下：

NavBar.js #

import { useContext } from 'react';
import { AiOutlineMenu } from 'react-icons/ai';
import ThemeToggle from './ThemeToggle';
import ThemeContext from '../context/ThemeContext';

const NavBar = () => {
    const { colors } = useContext(ThemeContext); 

    return <div className="w-screen h-46 bg-secondary-dark grid grid-cols-6 gap-4 content-center">
        {/* 下面这行代码不生效 */}
        <p className={`bg-[${colors.secondary}] text-text-white`}>Some words</p>
        <AiOutlineMenu style={{color:"white",fontSize:"1.5rem"}} className='ms-4 place-self-start col-span-5 '/>
        <ThemeToggle />
    </div>
}

export default NavBar;

ThemeContext.js #

import { createContext, useState } from "react"

const ThemeContext = createContext();

const ThemeProvider = ({ children })=>{
    const [darkTheme, setTheme] = useState(true);
    
    const colors = {
        primary: darkTheme ? "#282828" : "#E8E8E8",
        secondary: darkTheme ? "#FFFFFF" : "#FFFFFF",
        secondary2: darkTheme ? '#232323' : '#ECECEC',
        card: darkTheme ? '#383838' : 'F3EFEF',
        buttons: darkTheme ? '#504D4D' : '#C0C0C0',
        buttonActive: darkTheme ? '#A9A9A9' : '#828282'
    }

    const handleTheme = (themeParam)=>{
        setTheme(themeParam);
    }
    
    return (
        <ThemeContext.Provider value={{darkTheme, handleTheme, colors}}>
            {children}
        </ThemeContext.Provider>
    )
}

export {ThemeProvider};
export default ThemeContext;

核心原因 #

Tailwind CSS采用静态扫描机制，在构建阶段会遍历所有源代码提取类名，只有明确写在代码里的类名才会被打包。像bg-[${colors.secondary}]这种动态拼接的类名，因为构建工具无法提前解析变量值，会被直接忽略，自然不会生成对应的CSS样式。

可行解决办法 #

1. 配置Tailwind主题色（推荐方案）

在tailwind.config.js中预定义主题相关的颜色，直接使用预定义的类名结合Context切换主题，这是最符合Tailwind设计理念的方式：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        'theme-primary': '#282828',
        'theme-primary-light': '#E8E8E8',
        'theme-secondary': '#FFFFFF',
        'theme-secondary2': '#232323',
        'theme-secondary2-light': '#ECECEC',
        // 其他主题色对应添加
      },
    },
  },
  plugins: [],
}

修改NavBar组件，根据主题状态切换类名：

// NavBar.js
const NavBar = () => {
    const { darkTheme } = useContext(ThemeContext); 

    return <div className="w-screen h-46 bg-secondary-dark grid grid-cols-6 gap-4 content-center">
        <p className={`${darkTheme ? 'bg-theme-primary' : 'bg-theme-primary-light'} text-white`}>Some words</p>
        <AiOutlineMenu style={{color:"white",fontSize:"1.5rem"}} className='ms-4 place-self-start col-span-5 '/>
        <ThemeToggle />
    </div>
}

2. 使用style属性直接设置（临时应急）

如果不想修改Tailwind配置，直接通过React的style属性动态设置背景色，绕过Tailwind的类名扫描机制：

// NavBar.js
const NavBar = () => {
    const { colors } = useContext(ThemeContext); 

    return <div className="w-screen h-46 bg-secondary-dark grid grid-cols-6 gap-4 content-center">
        <p style={{ backgroundColor: colors.secondary }} className="text-white">Some words</p>
        <AiOutlineMenu style={{color:"white",fontSize:"1.5rem"}} className='ms-4 place-self-start col-span-5 '/>
        <ThemeToggle />
    </div>
}

3. 将动态类名加入安全列表

如果一定要用bg-[hex]的语法，需要在tailwind.config.js的safelist中提前声明所有可能用到的颜色类名，让Tailwind打包时保留这些样式：

// tailwind.config.js
// 这里可以直接复用Context里的颜色定义，或者手动列出所有可能值
const themeColors = {
  primary: "#282828",
  primaryLight: "#E8E8E8",
  secondary: "#FFFFFF",
  secondary2: "#232323",
  secondary2Light: "#ECECEC",
  card: "#383838",
  cardLight: "F3EFEF",
  buttons: "#504D4D",
  buttonsLight: "#C0C0C0",
  buttonActive: "#A9A9A9",
  buttonActiveLight: "#828282"
};

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  safelist: Object.values(themeColors).map(color => `bg-[${color}]`),
  theme: {
    extend: {},
  },
  plugins: [],
}

这样Tailwind会预先打包所有bg-[xxx]类名，动态拼接的类名就能正常生效了。

内容的提问来源于stack exchange，提问作者Pradeep