Skip to content

Commit d89b495

Browse files
mgcreamgcrea
committed
docs: add comparison page to documentation
Add comprehensive comparison page highlighting advantages over NativeWind and Uniwind: - Zero runtime dependencies and overhead - Simplest setup (Babel-only) - Smallest footprint (~360 MB vs competitors) - Supply chain security benefits - Smart compile-time optimization example Update sidebar to include new page in Getting Started section.
1 parent 0a05926 commit d89b495

File tree

2 files changed

+145
-0
lines changed

2 files changed

+145
-0
lines changed

‎docs/astro.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default defineConfig({
2929
{ label: "Installation", slug: "getting-started/installation" },
3030
{ label: "Quick Start", slug: "getting-started/quick-start" },
3131
{ label: "How It Works", slug: "getting-started/how-it-works" },
32+
{ label: "How It Compares", slug: "getting-started/how-it-compares" },
3233
],
3334
},
3435
{

‎docs/src/content/docs/getting-started/how-it-compares.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
title: How It Compares
3+
description: See how React Native Tailwind stacks up against other solutions
4+
---
5+
6+
React Native Tailwind takes a fundamentally different approach from other Tailwind-for-RN solutions. Here's why it stands out:
7+
8+
- ⚡ **Zero runtime overhead** for static styles
9+
- 📦 **Zero runtime dependencies**
10+
- 🛠️ **Simplest setup** — just a Babel plugin
11+
- 🔒 **Minimal supply chain risk**
12+
13+
## ⚡ At a Glance
14+
15+
| Aspect | React Native Tailwind | NativeWind | Uniwind |
16+
| ------------------------- | :-------------------: | :----------------: | :---------: |
17+
| Runtime dependencies | **0** ✅ | 1 | 4 |
18+
| Runtime overhead (static) | **None** ✅ | Minimal | Some |
19+
| Setup complexity | **Babel only** ✅ | Tailwind + runtime | Metro + CSS |
20+
| Tailwind peer required | **No** ✅ | Yes (v4) | Yes (v4) |
21+
| Platform modifiers | ✅ | ✅ | ✅ |
22+
| Color scheme support | ✅ | ✅ | ✅ |
23+
| State modifiers | ✅ | ✅ | ✅ |
24+
25+
## 🚀 The Compile-Time Advantage
26+
27+
React Native Tailwind transforms your className props **at build time**, not at runtime. Even dynamic expressions are intelligently optimized:
28+
29+
**What you write:**
30+
31+
```tsx
32+
<View className={`rounded-lg p-4 ${isSelected ? "bg-blue-500 border-blue-700" : "bg-gray-200"}`} />
33+
```
34+
35+
**What ships to your app:**
36+
37+
```tsx
38+
<View
39+
style={[
40+
_twStyles._rounded_lg,
41+
_twStyles._p_4,
42+
isSelected ? _twStyles._bg_blue_500_border_blue_700 : _twStyles._bg_gray_200,
43+
]}
44+
/>;
45+
46+
const _twStyles = StyleSheet.create({
47+
_rounded_lg: { borderRadius: 8 },
48+
_p_4: { padding: 16 },
49+
_bg_blue_500_border_blue_700: { backgroundColor: "#3B82F6", borderColor: "#1D4ED8" },
50+
_bg_gray_200: { backgroundColor: "#E5E7EB" },
51+
});
52+
```
53+
54+
🧠 **Smart compilation:** Every string literal is parsed at build time — only the conditional logic (`isSelected ? ... : ...`) remains at runtime. No parser shipped. No class resolution. Just pre-computed `StyleSheet.create` calls that React Native loves.
55+
56+
## 🏆 Why React Native Tailwind Wins
57+
58+
### 📦 Zero Runtime Dependencies
59+
60+
| Library | Runtime Dependencies |
61+
| ------------------------- | :------------------: |
62+
| **React Native Tailwind** | **0** ✅ |
63+
| NativeWind | 1 |
64+
| Uniwind | 4 |
65+
66+
Why this matters:
67+
68+
- 🎯 **Fewer breaking changes** — No upstream runtime packages to break your builds
69+
- 🔄 **Simpler upgrades** — Only dev dependencies to manage
70+
- 📉 **Reduced complexity** — Less code running in production
71+
72+
### ⚡ Zero Runtime Overhead
73+
74+
For static className strings, React Native Tailwind adds **literally zero runtime cost**:
75+
76+
- ✅ All parsing happens during build
77+
- ✅ Styles are pre-computed to `StyleSheet.create`
78+
- ✅ No class string resolution at app startup
79+
- ✅ No style caching or memoization needed
80+
81+
Other solutions include runtime components that must parse and resolve class strings when your app runs, adding overhead to every render.
82+
83+
### 🛠️ Simplest Setup
84+
85+
**React Native Tailwind:**
86+
87+
```javascript
88+
// babel.config.js
89+
module.exports = {
90+
plugins: ["@mgcrea/react-native-tailwind/babel"],
91+
};
92+
```
93+
94+
That's it. No additional config files, no CSS entry points, no Metro transformer setup.
95+
96+
**Compare to alternatives:**
97+
98+
- NativeWind requires `tailwindcss` peer dependency + `react-native-css` runtime
99+
- Uniwind requires Metro transformer config + CSS entry file + multiple runtime packages
100+
101+
### 🔒 Supply Chain Security
102+
103+
With zero runtime dependencies, React Native Tailwind has the smallest attack surface:
104+
105+
- ✅ **No runtime code from third parties** — Only your compiled styles run in production
106+
- ✅ **Compile-time only** — The Babel plugin runs in your build environment, not in user devices
107+
- ✅ **No binary toolchain** — Unlike solutions using native binaries (lightningcss, @tailwindcss/oxide)
108+
- ✅ **Minimal transitive dependencies** — Fewer packages = fewer potential vulnerabilities
109+
110+
In an era of supply chain attacks, less is more.
111+
112+
## 📊 Feature Comparison
113+
114+
| Feature | React Native Tailwind | NativeWind | Uniwind |
115+
| ------------------------------------------- | :-------------------: | :-------------------: | :-----------------------: |
116+
| **Core Approach** | Babel transform | Tailwind v4 + runtime | Metro transform + runtime |
117+
| **Platform modifiers** (`ios:`, `android:`) | ✅ | ✅ | ✅ |
118+
| **Color scheme** (`dark:`, `light:`) | ✅ | ✅ | ✅ |
119+
| **State modifiers** (`active:`, `focus:`) | ✅ | ✅ | ✅ |
120+
| **Dynamic classNames** | ✅ | ✅ | ✅ |
121+
| **Custom colors** | ✅ | ✅ | ✅ |
122+
| **Arbitrary values** (`p-[17px]`) | ✅ | ✅ | ✅ |
123+
| **Responsive breakpoints** | ❌ | ✅ | ✅ |
124+
| **RTL support** | ❌ | ✅ | ✅ |
125+
126+
:::note[Feature Parity]
127+
React Native Tailwind covers the most commonly used Tailwind features. Responsive breakpoints and RTL are on the roadmap!
128+
:::
129+
130+
## 🎯 Summary
131+
132+
Choose React Native Tailwind if you want:
133+
134+
- ⚡ **Maximum performance** — Zero runtime overhead for static styles
135+
- 📦 **Minimal dependencies** — Zero runtime deps means zero runtime surprises
136+
- 🛠️ **Simple setup** — One Babel plugin, no configuration maze
137+
- 💾 **Small footprint** — Fastest installs, smallest node_modules
138+
- 🔒 **Security-conscious** — Minimal attack surface, compile-time only
139+
140+
## What's Next?
141+
142+
- 📥 [Install React Native Tailwind](/react-native-tailwind/getting-started/installation/)
143+
- 🚀 [Quick Start Guide](/react-native-tailwind/getting-started/quick-start/)
144+
- 📖 [Basic Usage Examples](/react-native-tailwind/guides/basic-usage/)

0 commit comments

Comments
 (0)