styling-nativewind-v4-expo — Claude Code skill: what it does
Guides setup and troubleshooting for NativeWind v4 with Tailwind CSS v3 in Expo React Native projects.
npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a claude-codeWhat styling-nativewind-v4-expo does
This skill focuses entirely on applications running NativeWind v4 alongside tailwindcss@^3.4.17. It guides the assistant through wiring the base CSS stylesheet into Metro via withNativeWind, applying Babel presets, and keeping module definitions intact. The upcoming v5 architecture is deliberately excluded.
Troubleshooting follows an ordered sequence: verify package majors first, compile styles with the Tailwind v3 CLI, and confirm file paths across the app directory. A cache purge will not resolve a silent Tailwind v4 mismatch or broken Expo SDK peer dependencies.
Component authoring leans on literal variant dictionaries rather than dynamically concatenated class names. It also provides steps for one-time cssInterop wrappers on third-party elements, theme variables, and safe area handling.
What it helps with
- configure Metro and Babel for NativeWind v4 inside Expo
- resolve dependency conflicts between Tailwind CSS v3 and v4
- wrap external React Native components using
cssInterop - inspect styling behavior across dark mode and safe areas
Example prompts for the agent
- Set up NativeWind v4 and Tailwind v3 for this Expo Router application
- Diagnose why NativeWind utility classes are ignored by the Metro bundler
- Build a button component using static variant mappings
How to install styling-nativewind-v4-expo
1Skills CLI (Vercel)
npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a claude-code2Manually: put the files in place
~/.claude/skills/styling-nativewind-v4-expo/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/styling-nativewind-v4-expo/
1Skills CLI (Vercel)
npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a codex2Manually: put the files in place
.agents/skills/styling-nativewind-v4-expo/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a cursor2Manually: put the files in place
.cursor/skills/styling-nativewind-v4-expo/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install tristanmanchester/agent-skills styling-nativewind-v4-expo2Manually: put the files in place
.github/skills/styling-nativewind-v4-expo/SKILL.md1Skills CLI (Vercel)
npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a gemini-cli2Platform CLI
gemini skills install https://github.com/tristanmanchester/agent-skills --path styling-nativewind-v4-expoManually: put the files in place
.devin/skills/styling-nativewind-v4-expo/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about styling-nativewind-v4-expo
How to install styling-nativewind-v4-expo in Claude Code?
Run npx skills add tristanmanchester/agent-skills --skill styling-nativewind-v4-expo -a claude-code. The file will be installed to ~/.claude/skills/styling-nativewind-v4-expo/SKILL.md.
What does styling-nativewind-v4-expo do?
It guides the AI through correct configuration and component styling for NativeWind v4 within Expo environments.
Can I use this with NativeWind v5?
No, this skill is tailored exclusively to NativeWind v4 and Tailwind CSS v3. Version 5 requires a completely different toolchain setup.
