Nativewind architecture

Name: architecture
Author: nativewind

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

install

source · Clone the upstream repo

git clone https://github.com/nativewind/nativewind

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/nativewind/nativewind "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/architecture" ~/.claude/skills/nativewind-nativewind-architecture && rm -rf "$T"

manifest: .claude/skills/architecture/SKILL.md

How to explain

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