weapp-tailwindcss-react-native

为 Expo/React Native 配置 @weapp-tailwindcss/react-native 0.2.5 的 Tailwind CSS 4 编译器、Metro virtual module、Babel JSX transform、style manifest、tw runtime、dark/ios/android/native variants。Use for Expo SDK 54+, React Native 0.81+, Metro, native className, Android/iOS style compilation；不用于 uni-app App、ReactLynx 或普通小程序构建。

Ir a la instalación

Repositorio: sonofmagic/weapp-tailwindcss
Última actividad en el origen: 26 de agosto de 2026 a las 07:31
Idioma detectado de SKILL.md: chino
Estrellas: 1857
Forks: 102

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

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

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Explorador de archivos

3 archivos

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

weapp-tailwindcss-custom-build

将 weapp-tailwindcss 集成到自研构建器或高级流水线，覆盖 `weapp-tailwindcss/core`、generator、Vite/Webpack/Rspack/Rollup/Rolldown/Gulp 生命周期、ModuleGraph、Tailwind Scanner/source candidates、watch/HMR、source map、weapp-style-injector 和分包样式隔离。Use for custom bundlers, Node API, build adapters, asset graphs, loaders, plugins, or subpackage style injection；普通框架与 CLI 配置使用 setup skill。

2026-08-29

weapp-tailwindcss-lynx

为 ReactLynx + Rspeedy 配置 @weapp-tailwindcss/lynx 0.3.2 与 Tailwind CSS 4，覆盖 Rspeedy plugin、Lynx 原生 CSS、静态 className、theme 变量静态化、任意值、encoder 警告和 iOS/Android 运行端验证。Use for ReactLynx, Rspeedy, Lynx native CSS, arbitrary value compatibility, or Lynx bundle styling；不用于 React Native、uni-app App、Web 或普通小程序构建。

2026-08-26

weapp-tailwindcss-setup

为新项目配置当前 weapp-tailwindcss v5 与 Tailwind CSS 4，覆盖 uni-app、uni-app x、Taro、Mpx、原生小程序、weapp-vite、Vite、Webpack 5、Rspack、Gulp、独立 CLI 及小程序/H5/Web/App 多端。Use when setting up, installing, integrating, choosing a framework configuration, or building CSS with `weapp-tw`; 不用于旧版迁移、故障诊断、自研构建器、Expo React Native 或 ReactLynx。

2026-08-26

Ver todos los de este repositorio

weapp-tailwindcss React Native

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

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

工作流

确认项目是 Expo/React Native，而不是 uni-app App、Taro RN 或 App WebView。

ReactLynx/Rspeedy 项目转到 $weapp-tailwindcss-lynx；它保留 className 并生成原生 CSS，不使用 RN manifest。

检查 Expo、React、React Native、Node 和 Tailwind CSS 版本。

读取 references/expo-integration.md，建立 global.css、Metro 包装和类型入口。

Expo 默认只配置一次 withWeappTailwindcss()；它负责 source、manifest 和 Babel JSX transform，不维护第二份 class set。

静态 className 走预生成 StyleSheet lookup；动态完整字符串才使用受控 tw()。

检查 manifest.warnings，不把不支持的 CSS 声明当作成功。

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 验证步骤。