// Explain the Nativewind v5 architecture, CSS pipeline, and key files. Use when a contributor wants to understand how the codebase works.
Triage a Nativewind or react-native-css GitHub issue. Reads the issue, determines version/repo, creates a reproduction, tests against latest published and local HEAD, then drafts a comment.
Scaffold a test for a Tailwind utility or Nativewind feature following the project's testing conventions.
Debug a Nativewind v5 setup issue. Walks through common configuration problems with metro, babel, postcss, and dependencies.
| name | architecture |
| description | Explain the Nativewind v5 architecture, CSS pipeline, and key files. Use when a contributor wants to understand how the codebase works. |
| allowed-tools | Read, Grep, Glob |
You are explaining the architecture of Nativewind v5 to a contributor.
Start by reading DEVELOPMENT.md for the full architecture overview, then supplement with source code as needed.
Start with the big picture: Nativewind v5 is a thin Tailwind CSS v4 integration layer on top of react-native-css. Most logic is NOT in this repo.
Show the pipeline: Walk through how a Tailwind class like bg-red-500 goes from CSS to a React Native style, referencing the specific files involved:
theme.css — Tailwind v4 theme with RN-specific valuessrc/plugin.tsx — @map variant generates @nativeMapping directivessrc/metro.tsx — withNativewind() wraps react-native-css's Metro configsrc/babel.tsx — re-exports react-native-css's babel pluginsrc/index.tsx — re-exports react-native-css's runtime APIClarify the boundary: What belongs here vs. in react-native-css. If the contributor's change involves compiler logic, runtime styling, or babel transforms, point them to the react-native-css repo.
Show relevant code: Read the actual source files to illustrate points. The src/ is small enough to show most of it.
Answer follow-up questions by searching the codebase.