Nativewind自定义嵌套配色实现深色模式切换问题咨询

这种嵌套式的颜色配置需求是完全可行的，核心是要让Nativewind/Tailwind识别你定义的颜色与深色模式的关联关系，以下是两种适配方案：

方案一：自动适配（推荐，无需手动加dark:前缀） #

这是最贴合Tailwind主题切换逻辑的方式，只需要定义一次类名，就能自动根据当前主题切换颜色：

1. 修改tailwind.config.js，将品牌色定义为CSS变量

/** @type {import("tailwindcss").Config} */
module.exports = {
  presets: [require('@acme/tailwind-config')],
  content: ['./app/**/*.{ts,tsx}'],
  darkMode: 'class', // Nativewind会自动关联React Native的color scheme状态
  theme: {
    extend: {
      colors: {
        brandPrimary: 'var(--color-brand-primary)',
      },
    },
  },
};

2. 在全局容器中根据主题切换CSS变量值

import { View, StyleSheet } from 'react-native';
import { useColorScheme } from 'nativewind';

export default function App() {
  const { colorScheme } = useColorScheme();

  const globalStyles = StyleSheet.create({
    appContainer: {
      '--color-brand-primary': colorScheme === 'dark' ? '#ffffff' : '#000000',
      flex: 1,
    },
  });

  return (
    <View style={globalStyles.appContainer}>
      {/* 无需手动添加dark前缀，bg-brandPrimary会自动适配主题 */}
      <View className="mx-5 flex w-1/5 items-center justify-center">
        <View className="bg-brandPrimary mx-2 my-2 flex h-10 w-full rounded-full"></View>
        <Text className="text-slate-900 dark:text-white">Brand</Text>
      </View>
    </View>
  );
}

方案二：手动指定dark:前缀（匹配你原本的写法） #

如果你坚持要通过dark:bg-brandPrimary的写法触发深色值，可以通过Tailwind插件手动添加对应工具类：

/** @type {import("tailwindcss").Config} */
module.exports = {
  presets: [require('@acme/tailwind-config')],
  content: ['./app/**/*.{ts,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brandPrimary: '#000000',
      },
    },
  },
  plugins: [
    function({ addUtilities }) {
      // 为dark模式下的bg-brandPrimary绑定深色值
      addUtilities({
        '.dark\\:bg-brandPrimary': {
          backgroundColor: '#ffffff',
        },
      });
    },
  ],
};

配置完成后，你就可以继续使用bg-brandPrimary dark:bg-brandPrimary的写法，切换主题时会自动生效。

原配置不生效的原因 #

Tailwind的dark:前缀默认逻辑是引用独立的颜色值（比如dark:text-white对应colors.white），它不会自动读取你嵌套在brandPrimary下的dark键值。只有通过CSS变量的自动映射，或者手动扩展工具类的方式，才能实现你想要的嵌套式颜色关联效果。

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