不能直接在 JS 中调用 theme() 函数，因为它是 PostCSS 构建时专用函数，并非运行时可用的 JS 函数；正确方式是通过 resolveConfig 解析 tailwind.config.js 获取完整配置对象。
为什么不能直接在 JS 中调用 theme() 函数读取 Tailwind 配置？
Tailwind 的 theme() 是一个仅供 CSS 层使用的 PostCSS 插件函数，它只在构建时被 @apply 或 config.theme 解析阶段生效，不是运行时可调用的 JS 函数。你在 JS 文件里写 theme('colors.blue.500') 会直接报 ReferenceError: theme is not defined。
正确做法：从 tailwind.config.js 导出配置对象
你需要把配置“导出为普通 JS 对象”，而不是依赖构建时函数。Tailwind 配置文件本身就是一个 Node.js 模块，只要它最终 module.exports 一个对象，你就能在其他 JS 文件中 require 或 import 它。
- 确保你的
tailwind.config.js使用module.exports = { ... }（CommonJS）或export default { ... }（ESM），且不包含动态 import() 或未定义变量 - 如果用了
presets或content等非纯数据字段，注意它们可能含函数或 glob 表达式——这些无法安全序列化，应排除或单独处理 - 推荐只导出
theme、colors、fontSize等静态结构部分，例如：module.exports = { theme: { extend: { colors: { brand: '#3b82f6', }, fontSize: { 'body-lg': '1.125rem', } } } }
如何在 React/Vue/普通 JS 中安全读取颜色或间距值？
导入配置后，需手动合并默认值与 extend，因为 Tailwind 默认配置不会自动注入到导出对象里。你不能只读 config.theme.extend.colors 就完事——比如 blue.500 在默认配置里存在，但没出现在 extend 中。
- 使用
resolveConfig是最稳妥的方式：const tailwindConfig = require('./tailwind.config.js') const { resolveConfig } = require('tailwindcss') const fullConfig = resolveConfig(tailwindConfig) -
fullConfig.theme.colors.blue['500']就能拿到#3b82f6；fullConfig.theme.spacing['4']返回'1rem' - 注意：
resolveConfig会执行插件、解析darkMode等逻辑，但它不支持 ESM 环境下的顶层 await，Node.js 版本需 ≥14.18 且项目启用"type": "module"时要改用dynamic import() - 避免在浏览器端直接 import
tailwind.config.js—— 它可能含 Node.js-only 模块（如fs），导致打包失败
常见错误：读到 undefined 或字符串而非数值
很多人发现 fullConfig.theme.fontSize['lg'] 返回的是 ['1.125rem', { lineHeight: '1.75' }] 这样的数组，而不是单纯字符串。这是因为 Tailwind 允许为字体大小同时指定字号和行高。
立即学习“前端免费学习笔记（深入）”；
- 别假设所有配置项都是字符串或数字；
fontSize、borderWidth、boxShadow都可能返回数组或嵌套对象 - 读取
spacing时注意单位：默认是'0.25rem'这类带单位的字符串，不是像素值；若需计算，得自己 parse 或用parseFloat提取数值部分 - 自定义值（如
theme.extend.colors.myRed）若没在extend里声明，resolveConfig也不会自动 fallback 到默认色板——它只合并你明确写的部分
真正麻烦的不是怎么读，而是读到什么、怎么用——Tailwind 的配置结构是“分层合并+类型混合”的，直接 JSON.stringify 后再解析会丢掉函数和注释，但更重要的是丢掉语义。你得清楚自己要的是 token 名称、原始值，还是已解析的 CSS 字符串。
