Expo React Native+Nativewind如何获取Tailwind主题色实际值

核心问题 #

resolveConfig 只会解析 tailwind.config.js 中的字面量配置，不会主动读取并解析 CSS 文件中的变量值，所以你拿到的是配置里写的 var(--xxx) 字符串，而非实际颜色值。

下面是三种可行的解决方法，按推荐优先级排序：

方法1：统一颜色数据源（最推荐） #

把颜色值集中在一个 JS 文件中，同步给 tailwind.config.js 和 global.css，既保证 className 正常工作，又能让 resolveConfig 直接拿到实际值：

1. 创建统一的颜色配置文件
   比如在 src/config/colors.js 中定义所有颜色：

export const appColors = {
  primary: '#165DFF',
  border: '#E5E7EB',
  secondary: '#6B7280',
  // 其他颜色...
};

2. 更新 tailwind.config.js
   直接引用这个 JS 对象作为主题颜色：

const { appColors } = require('./src/config/colors');

module.exports = {
  theme: {
    extend: {
      colors: appColors,
    },
  },
  // 其他配置...
};

3. 同步 global.css 中的变量
   如果仍需要使用 CSS 变量，从 JS 文件生成对应的变量（可以用脚本或 CSS-in-JS 方式）：

:root {
  --primary: #165DFF; /* 和 appColors 保持一致 */
  --border: #E5E7EB;
}

或者在 Expo 中用动态方式注入，比如在入口文件中：

import { StyleSheet } from 'react-native';
import { appColors } from './src/config/colors';

// 生成全局 CSS 变量
const globalVars = Object.fromEntries(
  Object.entries(appColors).map(([key, value]) => [`--${key}`, value])
);

StyleSheet.create({
  ':root': globalVars,
});

这样 resolveConfig 就能直接拿到实际的颜色值，className="text-primary" 也能正常工作，同时避免了多文件维护的同步问题。

方法2：运行时读取 CSS 变量实际值 #

Nativewind 在 React Native 环境中会把 CSS 变量注入到全局样式表中，你可以通过以下方式获取实际值：

import { StyleSheet } from 'react-native';

/**
 * 获取 CSS 变量对应的实际值
 * @param {string} varName - 变量名，比如 "--primary"
 * @returns {string} 实际颜色值
 */
const getCSSVarValue = (varName) => {
  // 把 --xxx 转化为驼峰式（Nativewind 内部的变量存储格式）
  const camelCaseKey = varName.replace(/^--/, '').replace(/-([a-z])/g, (match) => match[1].toUpperCase());
  // 从全局样式表中获取值
  return StyleSheet.getStyleSheet()[camelCaseKey];
};

// 使用示例
const primaryColor = getCSSVarValue('--primary');

注意：不同版本的 Nativewind 可能有变量存储格式的差异，需要根据实际情况调整。

方法3：手动替换 resolveConfig 结果中的变量 #

先调用默认的 resolveConfig 拿到原始配置，再手动把 var(--xxx) 替换为实际值：

1. 维护一份 CSS 变量映射
   可以直接从 global.css 中提取，或者从统一的 JS 文件中引用：

const cssVarsMap = {
  '--primary': '#165DFF',
  '--border': '#E5E7EB',
};

2. 递归替换配置中的变量

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../tailwind.config';

// 获取原始解析结果
const rawResolvedConfig = resolveConfig(tailwindConfig);

// 递归替换 var(--xxx) 为实际值
const replaceVars = (obj) => {
  if (typeof obj === 'string' && obj.startsWith('var(')) {
    const varName = obj.match(/var\((.*?)\)/)[1].trim();
    return cssVarsMap[varName] || obj;
  }
  if (typeof obj === 'object' && obj !== null) {
    Object.keys(obj).forEach(key => {
      obj[key] = replaceVars(obj[key]);
    });
  }
  return obj;
};

// 处理后的配置，包含实际颜色值
const resolvedConfigWithValues = replaceVars(rawResolvedConfig);

这种方法不需要修改现有配置，但需要额外维护变量映射，适合无法修改原有配置结构的场景。

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