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 para a instalação

Repositório: sonofmagic/weapp-tailwindcss
Última atividade na origem: 26 de agosto de 2026 às 07:31
Idioma detectado do SKILL.md: chinês
Estrelas: 1.857
Forks: 102

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

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

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos

3 arquivos

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

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 todas deste repositório

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