weapp-tailwindcss-react-native

Guidance for configuring weapp-tailwindcss with Expo and React Native, a framework for building mobile apps for Android and iOS with React. It covers compiling Tailwind classes into native style lookups through Metro, React Native’s build tool.

In plain words
What is it for?
Use it when setting up Tailwind CSS 4 in Expo or React Native, configuring Metro and Babel, checking style warnings, or testing dark mode and Android/iOS variants.
Why use it?
It helps avoid mixing incompatible web or small-program build pipelines into a native app. It also explains how to handle dynamic classes, platform variants, unsupported styles, and style precedence.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-react-native
Any agent
npx skills add sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-react-native
Clone the repo
git clone --depth 1 https://github.com/sonofmagic/weapp-tailwindcss

Made for: Claude Code, Codex.

Per session 104 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 610 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00104 $0.00610
Opus 5 $0.00052 $0.00305
Sonnet 5 $0.00021 $0.00122
Haiku 4.5 $0.00010 $0.00061

Measured yesterday against content hash 3e6b6b0445cf, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

weapp-tailwindcss-react-native scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

skills/weapp-tailwindcss-react-native/SKILL.md · 34 lines

What it actually says

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,测试时保留该优先级。
  • 自定义组件需要接收 classNamestyle;不要自动猜测第三方组件 prop 映射。
  • dark:ios:android:native: 由注入的环境选择,未支持的 CSS 以 warning 暴露。

输出要求

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

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 34 lines · 104 tokens per session scan A 3e6b6b0445cf

Subscribe to this mod's changes

weapp-tailwindcss-react-native is a skill published in the GitHub repository sonofmagic/weapp-tailwindcss (1,853 stars, last pushed 2d ago), licensed MIT. It adds 104 tokens to every session and 610 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

uniwind

Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent- color props, platform/data/state/responsive variants, CSS variables, custom utilities…

uni-stack/uniwind · 130 tokens

weapp-vite-best-practices

面向采用 weapp-vite 项目布局仓库或已安装 weapp-vite 依赖项目的工程化实践手册,覆盖 vite.config.ts 的 weapp 配置、内置 i18n、自动路由、routeRules/layout、buildScope、自动导入组件、分包、npm、六平台单目标构建、受管 TypeScript、HMR、sourcemap、prepare、MCP、Web runtime、lib mode、worker、AI skills,以及与 weapp-ide-cli 的命令治理边界。.

weapp-vite/weapp-vite · 134 tokens

native-to-weapp-vite-wevu-migration

面向原生微信、支付宝、抖音等小程序渐进迁移到 weapp-vite + 原生 或继续升级到 weapp-vite + wevu + Vue SFC 的结构化工作流,覆盖六平台单目标构建、原生扩展名保留、Web 联调边界、路线选择、工具链接入、SFC 试点、响应式升级与可回滚验证。.

weapp-vite/weapp-vite · 106 tokens

docs-and-website-sync

面向 weapp-vite monorepo 的文档、website 与公开 skills 同步工作流。适用于源码能力变化后同步配置、CLI、React/Wevu/Vue SFC、多平台、mpcore、README、packaged docs、脚手架 AGENTS.md、AI skills 元数据和触发回归入口。.

weapp-vite/weapp-vite · 79 tokens

weapp-vite-vue-sfc-best-practices

面向使用 weapp-vite 的小程序项目的 Vue SFC 实践手册,覆盖 script setup、纯模板 SFC、JSON 宏、definePageMeta/layout、defineModel、usingComponents、内置 i18n Behavior、JSX/TSX script block、模板指令兼容、多平台 SFC、.weapp-vite 类型支持文件与受管 prepare 工作流。.

weapp-vite/weapp-vite · 107 tokens

release-and-changeset-best-practices

面向 weapp-vite monorepo 的 repoctl release、pnpm change intent 与 issue 交付工作流。适用于 weapp-vite、wevu、@weapp-vite/react、mpcore、模板、公开 skills 或 AI 合约变更,判断 change intent、create-weapp-vite 联动、跨平台验证,以及从 issue worktree 到中文 PR/CI 的交付闭环。.

weapp-vite/weapp-vite · 106 tokens