Tailwind CSS NativeWind Reusables shadcn 什么关系

一、核心关系图

┌─────────────────────────────────────────┐
│           Tailwind CSS                  │  ← 底层：原子化 CSS 框架
│    （Web 端样式系统，提供 class 语义）      │
└─────────────────────────────────────────┘
                    ↓ 适配
┌─────────────────────────────────────────┐
│           NativeWind                    │  ← 桥梁：Tailwind → React Native
│    （将 Tailwind 编译为 RN StyleSheet）   │
└─────────────────────────────────────────┘
                    ↓ 基础
┌─────────────────────────────────────────┐
│         React Native Reusables            │  ← 组件层：基于 NativeWind 的组件
│  （shadcn/ui 设计系统的 RN 实现）          │
└─────────────────────────────────────────┘
                    ↓ 同源
┌─────────────────────────────────────────┐
│           shadcn/ui                     │  ← 源头：Web 端设计系统
│    （Next.js/React 的组件库模式）          │
└─────────────────────────────────────────┘

二、逐层详解

1. Tailwind CSS — 根基

属性	说明
本质	CSS 工具类框架
核心	原子化 class（`flex`、`bg-red-500`、`p-4`）
平台	仅 Web（浏览器/CSSOM）
作用	定义”样式怎么写”

/* Tailwind 生成的 CSS */
.bg-red-500 { background-color: #ef4444; }
.p-4 { padding: 1rem; }

2. NativeWind — 适配器

属性	说明
本质	将 Tailwind 适配到 React Native
核心	编译时把 `className` 转为 `StyleSheet`
平台	React Native / Expo
作用	让 RN 能用 Tailwind 语法

// 输入：Tailwind 语法
<View className="bg-red-500 p-4" />

// 输出：RN StyleSheet
StyleSheet.create({
  style: { backgroundColor: '#ef4444', padding: 16 }
})

关键点：NativeWind 不是”CSS 框架”，而是编译器/转译层。

3. shadcn/ui — 设计系统（Web 端）

属性	说明
本质	Web 端的组件库模式（非传统 npm 库）
核心	可复制源码的组件，基于 Radix UI + Tailwind
平台	Next.js / React (Web)
作用	定义”组件长什么样”

# shadcn/ui 使用方式
npx shadcn add button  # 复制 button.tsx 到项目

特点：不 npm install，而是复制源码到本地，完全可控。

4. React Native Reusables — RN 版 shadcn

属性	说明
本质	shadcn/ui 的 React Native 移植版
核心	基于 NativeWind（而非 Web CSS）的组件
平台	React Native / Expo
作用	让 RN 也有”可复制组件”的体验

# Reusables 使用方式（类似 shadcn）
npx shadcn add button  # 复制 button.tsx（用 NativeWind 实现）

关系：Reusables 是 shadcn/ui 的跨平台兄弟，共享设计哲学（可复制源码、Radix 交互模式），但底层用 NativeWind 替代 Tailwind CSS。

三、关键对比

技术	所在层级	解决的问题	类比
Tailwind CSS	样式语言	怎么写 CSS	英语语法
NativeWind	编译器	RN 怎么用 Tailwind	英语→中文翻译器
shadcn/ui	Web 组件	Web 组件怎么设计	中文写作模板
Reusables	RN 组件	RN 组件怎么设计	中文写作模板的英文版