Gluestack-UI配置无效求助：Button组件属性不生效

我正尝试将gluestack-ui集成至项目中，但配置似乎未正确生效。已遵循安装指南（CLI及手动方式双重核对）操作，但未产生任何效果。例如添加了一个Button组件，设置了size="sm"、variant="solid"、action="primary"属性，然而这些属性均未生效。

相关配置及项目结构 #

gluestack-ui.config.json 配置 #

{ "tailwind": { "config": "tailwind.config.js", "css": "global.css" }, "app": { "entry": "App.tsx", "components": "components/ui" } }

tailwind.config.js 配置 #

从截图需重点确认：

• content数组是否包含gluestack-ui生成的组件路径
• plugins数组是否引入了gluestack-ui的Tailwind插件

项目结构 #

项目根目录包含App.tsx、tailwind.config.js、global.css，以及components/ui组件目录

排查与解决步骤 #

1. 检查Tailwind内容扫描路径
   确保tailwind.config.js的content数组包含gluestack-ui组件目录，示例：

   content: [
     "./App.tsx",
     "./components/ui/**/*.{js,ts,jsx,tsx}",
     // 其他项目文件路径
   ],
   

   路径错误会导致Tailwind无法识别组件样式类。

2. 确认Tailwind插件引入
   检查tailwind.config.js的plugins数组是否添加核心插件：

   plugins: [
     require('@gluestack-ui/tailwind-plugin'),
     // 其他插件
   ],
   

   这是gluestack-ui样式生效的必要配置。

3. 验证全局CSS配置
   确保global.css包含Tailwind基础指令及gluestack-ui样式：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   @import '@gluestack-ui/themes';
   

   同时确认该CSS文件已在App.tsx入口中导入。

4. 检查组件导入方式
   必须使用本地生成的组件，而非直接从@gluestack-ui/react导入：

   // 正确
   import { Button } from '../components/ui';
   // 错误（无法应用本地样式配置）
   import { Button } from '@gluestack-ui/react';
   

5. 重新生成组件并重启服务
   运行CLI命令重新生成组件，再重启开发服务器：

   npx gluestack-ui generate
   

   避免缓存导致样式不更新。

6. 核对依赖版本兼容性
   确认@gluestack-ui/react、@gluestack-ui/tailwind-plugin与项目Tailwind CSS版本匹配，版本不兼容会导致样式失效。

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