React Context传递的自定义值在Tailwind CSS中无法生效问题

Tailwind CSS是静态编译的，它会在构建阶段扫描代码中所有静态编写的类名，你这种动态拼接的类名（bg-[${settings.colors.primary}]）不会被识别，自然也不会生成对应的CSS样式，这就是样式无法渲染的核心原因。

下面提供几种可行的解决方案：

方案1：使用内联样式 #

这是最直接的实现方式，直接通过React的style属性设置颜色：

import { useSettings } from "@/hooks/settings"
import React from "react";

export default function CheckList() {
  const {settings} = useSettings();
  return (
    <div style={{ backgroundColor: settings.colors.primary }} />
  )
}

方案2：利用CSS变量结合Tailwind任意值语法 #

如果需要保留Tailwind的工具类能力（比如hover状态、响应式断点等），可以把Context中的颜色赋值给CSS变量，再在Tailwind中调用：

步骤1：在Provider中注入CSS变量 #

修改SettingsProvider，在包裹子组件的元素上设置全局CSS变量：

import React from "react";
import { IContext, IProviderProps } from "./Settings.structure";

const SettingsContext = React.createContext({} as IContext);

function SettingsProvider({ children }: IProviderProps) {
  const settings = {
    colors: {
      primary: "#2EB5AC",
      secondary: "#521AA3",
      tertiary: "#FB7100",
    },
  };

  return (
    <SettingsContext.Provider value={{ settings }}>
      <div style={{
        "--color-primary": settings.colors.primary,
        "--color-secondary": settings.colors.secondary,
        "--color-tertiary": settings.colors.tertiary,
      }}>
        {children}
      </div>
    </SettingsContext.Provider>
  );
}

步骤2：在组件中使用CSS变量 #

直接在Tailwind类名中引用定义好的CSS变量：

import { useSettings } from "@/hooks/settings"
import React from "react";

export default function CheckList() {
  return (
    <div className="bg-[var(--color-primary)] hover:bg-[var(--color-secondary)]" />
  )
}

方案3：将固定颜色配置到Tailwind主题（适用于颜色可选值固定的场景） #

如果你的Context中的颜色是固定的几个可选值（而非用户完全自定义的任意颜色），可以把这些颜色提前配置到tailwind.config.js中，直接使用Tailwind的主题类名：

修改tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#2EB5AC",
        secondary: "#521AA3",
        tertiary: "#FB7100",
      },
    },
  },
  plugins: [],
}

在组件中使用主题类名 #

import { useSettings } from "@/hooks/settings"
import React from "react";

export default function CheckList() {
  // 假设settings中存储的是颜色对应的key，比如"primary"
  const {settings} = useSettings();
  return (
    <div className={`bg-${settings.colors.primary}`} />
  )
}

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