Tailwind配置中如何正确使用theme()函数定义自定义样式变量

报错原因 #

1. 首次编写的buttons: theme(theme.gap.3)是在配置初始化阶段直接调用了theme()，此时theme对象还未完成构建，直接访问theme.gap.3会触发递归加载，最终导致栈溢出。
2. 后续修改的箭头函数写法逻辑正确，但入参格式错误：theme()函数只接收点分隔的字符串格式的配置路径，不支持直接传入theme.gap.3这类对象引用。

正确配置示例 #

自定义gap变量

module.exports = {
  theme: {
    extend: {
      gap: {
        // 传入字符串格式的配置路径即可
        buttons: theme => theme('gap.3')
      },
    },
  },
};

自定义颜色变量

注意Tailwind默认的colors.red是包含所有色阶的对象，需要指定到具体色值层级才会返回合法颜色值：

module.exports = {
  theme: {
    extend: {
      colors: {
        // 示例取red的500色阶，可根据需求调整路径
        alert: theme => theme('colors.red.500')
      }
    },
  },
};

核心注意事项 #

• 所有需要引用内置配置的自定义值，必须包裹在(theme) => {}箭头函数内返回，禁止在配置顶层直接调用theme()
• theme()的入参只能是点分隔的字符串，和平时写Tailwind类名的层级逻辑一致，比如spacing.4、fontSize.sm
• 引用多层级配置（比如颜色、阴影）时，必须指定到最终的基础值层级，不能直接引用父级分类，否则会返回对象而非可用样式值

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