告别样式混乱-用Tailwind CSS重塑React Native开发效率 | 前端进阶之旅

最近在公司接手了一个React Native项目，打开代码的那一刻我整个人都不好了。上千行的StyleSheet，命名从container1到container27，找个样式比找对象还难。更要命的是，改个颜色要翻三个文件，调个间距得祈祷别影响其他页面。那一刻我就在想：2025年了，咱们真的还要这么写样式吗？

后来偶然接触到了Tailwind CSS在React Native上的实现方案twrnc，说实话，刚开始我是拒绝的。又是一个新轮子？学习成本会不会很高？但用了两周之后，我真香了。今天就来聊聊，为什么说Tailwind CSS能重塑React Native的开发效率。

# 传统React Native样式开发的痛点

先说说传统开发模式到底痛在哪。不吐不快。

# 样式和组件分离带来的心智负担

在传统的React Native开发中，我们通常会这样写：

import { StyleSheet, View, Text } from 'react-native';

function UserCard({ name, bio }) {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.name}>{name}</Text>
      </View>
      <Text style={styles.bio}>{bio}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff',
    padding: 16,
    borderRadius: 8,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  header: {
    marginBottom: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#e5e5e5',
    paddingBottom: 8,
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333333',
  },
  bio: {
    fontSize: 14,
    color: '#666666',
    lineHeight: 20,
  },
});

@前端进阶之旅: 代码已经复制到剪贴板

看起来挺规范的对吧？但问题来了：

上下反复横跳：写组件的时候要不停地在顶部和底部来回滚动，看看styles.container到底定义了啥。写着写着就忘了自己要改哪个样式。