如何在Tailwind插件中调用主题变量？代码示例遇执行问题

你的代码问题出在CSS规则对象的结构错误：.test-2直接将theme()的返回值作为值，而正确的写法应该是给选择器对应的对象添加CSS属性，把theme()的结果赋值给具体属性。

修正后的代码如下：

/** @type {Plugin} */
const plugin = require('tailwindcss/plugin');

module.exports = plugin(function ({ addBase, theme }) {
  return addBase({
    '.test-1': { color: 'green' }, // 正常生效
    '.test-2': { color: theme('colors.amber.300') } // 正确调用theme变量
  });
});

原理说明 #

theme()函数的作用是获取Tailwind主题配置中的对应值，它返回的是具体的样式值（比如这里的amber.300对应的十六进制颜色）。在addBase的参数中，每个选择器必须对应一个包含属性-值对的对象，所以需要把theme()的结果赋值给color属性，而不是直接作为选择器的值。

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