如何在React组件中获取Tailwind CSS自定义主题的更新值？

直接导入tailwindcss/defaultTheme只会拿到Tailwind的原始默认主题，不会读取你自定义的tailwind.config.js配置。要获取更新后的主题值，有两种常用方式：

方式一：从自定义配置文件直接导出主题 #

在你的tailwind.config.js中，扩展主题后可以直接导出修改后的主题对象：

const defaultTheme = require('tailwindcss/defaultTheme');

const customTheme = {
  extend: {
    colors: {
      primary: '#ff4500',
    },
    fontFamily: {
      sans: ['Roboto', ...defaultTheme.fontFamily.sans],
    },
  },
};

module.exports = {
  theme: customTheme,
  // 其他配置项...
};

// 单独导出主题供React组件使用
exports.customTheme = customTheme;

然后在React组件中导入这个导出的主题：

import { customTheme } from '../tailwind.config.js';

console.log(customTheme);

方式二：使用resolveConfig生成完整主题 #

Tailwind提供了resolveConfig工具，可以合并默认主题与你的自定义配置，生成最终的完整主题：

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

// 合并默认主题和自定义配置，得到完整的最终主题
const fullTheme = resolveConfig(tailwindConfig);

console.log(fullTheme.theme); // 这里包含所有主题值（默认+自定义修改）

这种方式的优势是能拿到完整的主题对象，包括你没修改的默认值，适合需要使用全部主题变量的场景。

注意：确保导入tailwind.config.js时路径正确，根据你的项目结构调整相对路径。

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