MetaMask / MetaMask/metamask-design-system

research: evaluate React Native path to Tailwind v4

Open
#982 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.