# Architecture

> Explain the Nativewind v5 architecture, CSS pipeline, and key files. Use when a contributor wants to understand how the codebase works.

- Skill: `nativewind/architecture` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nativewind/architecture`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nativewind/architecture/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: nativewind (https://skillmd.com/u/nativewind)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nativewind/architecture

---


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.

## How to explain

1. **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.

2. **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 values
   - `src/plugin.tsx` — `@map` variant generates `@nativeMapping` directives
   - `src/metro.tsx` — `withNativewind()` wraps react-native-css's Metro config
   - `src/babel.tsx` — re-exports react-native-css's babel plugin
   - `src/index.tsx` — re-exports react-native-css's runtime API

3. **Clarify 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.

4. **Show relevant code**: Read the actual source files to illustrate points. The src/ is small enough to show most of it.

5. **Answer follow-up questions** by searching the codebase.