MetaMask / MetaMask/metamask-design-system
research: evaluate React Native path to Tailwind v4
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
## Summary
With web (`design-system-react`) migrated to Tailwind v4 (#842), we need to define the React Native path forward. Currently `design-system-react-native` uses `twrnc` which is locked to Tailwind v3 with no v4 roadmap from the maintainer.
## Current State (March 2026)
| Solution | TW v4 | Production Ready | Notes |
|---|---|---|---|
| **twrnc** (current) | ❌ Locked to `<4.0.0` | ✅ for v3 | Maintainer explicitly has no v4 plans ([#331](https://github.com/jaredh159/tailwind-react-native-classnames/issues/331)) |
| **NativeWind v4** | ❌ TW v3 only | ✅ Stable | Best stable alternative to twrnc but still v3 |
| **NativeWind v5** | ✅ TW v4.1+ | ❌ Pre-release | Requires RN 0.81+, New Architecture, Reanimated v4 |
| **Uniwind** | ✅ TW v4 only | ⚠️ Stable but young | By Unistyles team, 1.4k stars, commercial Pro tier |
## Questions to Answer
1. **Timeline**: When do we need RN on TW v4? Is there a forcing function (e.g. token parity, shared config)?
2. **NativeWind v5**: Monitor for stable release. What's our minimum RN version? Are we on New Architecture?
3. **Uniwind**: Worth evaluating as an alternative? Risk assessment for a younger library.
4. **Interim parity**: Should we invest in cross-preset parity tests (twrnc vs theme.css) while RN stays on v3? (See #980)
5. **Shared config**: Can we generate twrnc config from theme.css (or vice versa) to keep a single source of truth?
## Recommended Approach
1. **Now**: Keep twrnc on v3. Monorepo coexistence works (twrnc resolves its own tailwindcss@3.x).
2. **Q3-Q4 2026**: Re-evaluate when NativeWind v5 reaches stable. Plan RN 0.81+ / New Architecture upgrade if not already done.
3. **If greenfield opportunity arises**: Evaluate Uniwind as a TW v4-native option.
## References
- Tailwind v4 web migration: #842
- twrnc v4 discussion: https://github.com/jaredh159/tailwind-react-native-classnames/issues/331
- NativeWind v5 preview: https://www.nativewind.dev/v5/guides/migrate-from-v4
- Uniwind: https://docs.uniwind.dev/
Contributor guide
Research direction
Review the current React Native setup described in the issue, then compare the NativeWind v5 and Uniwind references alongside the Tailwind v4 web migration in #842 and parity discussion in #980. Done means documenting the RN and New Architecture constraints, evaluating the alternatives and shared-config or parity options, and recording a justified path and reevaluation timeline.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, tailwindcss
- Domain
- design, mobile
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100