Expo中Tailwind CSS自定义插件无法正常使用求助

错误原因分析 #

你遇到的两个错误核心是NativeWind的Tailwind插件API与Web版存在差异：

1. theme 在NativeWind插件中是对象类型，而非Web版的函数，调用 theme("colors.primary") 会触发属性未实现错误。
2. addComponents 中使用 @screen 别名或不符合React Native样式规范的写法，导致解析失败。

修正后的配置代码 #

修改你的 tailwind.config.js 如下：

const plugin = require("tailwindcss/plugin");
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#1F9D55",
        secondary: "#B7DDC1",
        tertiary: "#F7FFF9"       
      },
      // 确保断点定义（若NativeWind未默认包含）
      screens: {
        md: "768px",
      },
    },
  },
  plugins: [
    plugin(function ({ addComponents, theme }) {
      // 直接访问theme对象属性获取自定义颜色
      console.log(theme.colors.primary); 

      addComponents({
        ".heading3": {
          fontSize: "1rem",
          lineHeight: 26, // React Native中lineHeight用数值而非字符串
          // 使用标准媒体查询代替@screen别名（部分NativeWind版本对@screen支持有限）
          "@media (min-width: 768px)": {
            fontSize: "24px",
            lineHeight: 32,
          },
        },
      });
    }),
  ],
};

额外注意事项 #

• 版本适配：确保安装 nativewind@^3.0.0 及配套的 tailwindcss@^3.x 版本，不同版本的API兼容度不同。
• React Native样式规范：所有样式值需符合React Native要求，比如 lineHeight 用纯数值，避免Web特有的单位写法。
• API子集限制：NativeWind仅支持Tailwind插件API的部分功能，若需更复杂的自定义逻辑，可尝试用 addUtilities 替代 addComponents，或直接在代码中定义样式变量复用。

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