mcpField
W
weapp-tailwindcss-react-native

weapp-tailwindcss-react-native

github.com/sonofmagic开发296 次安装3 天前更新
代码仓库

关于 weapp-tailwindcss-react-native

面向 Expo/React Native 项目的技能，将 Tailwind CSS 4 候选编译为 React Native style manifest，并说明 Metro 集成和平台验证流程。

主要功能

  1. 01编译 Tailwind CSS 4 候选
  2. 02生成 React Native style manifest
  3. 03指导 Expo 与 Metro 配置
  4. 04检查不支持声明的警告
  5. 05说明 Android/iOS 验证流程

适用场景

  1. 01在 Expo 项目集成 Tailwind 样式
  2. 02为静态 className 配置预生成查找
  3. 03处理动态完整类名字符串
  4. 04排查 manifest 中的 CSS 警告

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sonofmagic/skills --skill weapp-tailwindcss-react-native

安装后在 Claude Code 中输入/weapp-tailwindcss-react-native确认已加载。

附带文件agents/openai.yamlreferences/expo-integration.md

详细介绍

来自项目 README

weapp-tailwindcss React Native

使用独立 Native 编译器把 Tailwind CSS 4 候选编译为 React Native style manifest，不套用小程序 CSS 产物链。

完整的 Metro 配置字段和 manifest 参考见站点的 React Native / Expo 配置参考。

工作流

  1. 确认项目是 Expo/React Native，而不是 uni-app App、Taro RN 或 App WebView。
  2. ReactLynx/Rspeedy 项目转到 $weapp-tailwindcss-lynx；它保留 className 并生成原生 CSS，不使用 RN manifest。
  3. 检查 Expo、React、React Native、Node 和 Tailwind CSS 版本。
  4. 读取 references/expo-integration.md，建立 global.css、Metro 包装和类型入口。
  5. Expo 默认只配置一次 withWeappTailwindcss()；它负责 source、manifest 和 Babel JSX transform，不维护第二份 class set。
  6. 静态 className 走预生成 StyleSheet lookup；动态完整字符串才使用受控 tw()。
  7. 检查 manifest.warnings，不把不支持的 CSS 声明当作成功。
  8. Web 仅做 smoke test，最终在 Android/iOS 模拟器或真机验证布局、颜色模式和平台变体。

边界

  • 不引入 NativeWind 或 react-native-css 运行时作为隐式依赖。
  • 不注册 @tailwindcss/vite 或 @tailwindcss/postcss 生成第二份 Tailwind CSS。
  • 普通 inline style 覆盖 Tailwind class；!important class 覆盖 inline style，测试时保留该优先级。
  • 自定义组件需要接收 className 和 style；不要自动猜测第三方组件 prop 映射。
  • dark:、ios:、android:、native: 由注入的环境选择，未支持的 CSS 以 warning 暴露。

输出要求

输出安装、完整 Metro/CSS/类型配置、支持边界、manifest warning 检查，以及 Android/iOS 验证步骤。

评论

支持 Markdown