深入理解 React 样式方案

React 的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有：

1. 内联样式

2. module css

3. css in js

4. tailwind css

这些方案中，均有各自的优势和缺点。

1. 方案优劣势

1. 内联样式: 简单直观，适合动态样式和小型项目，但复用性差，功能有限；

2. CSS Modules: 提供局部作用域，支持所有 CSS 功能，适合中大型项目，但配置复杂；

3. CSS-in-JS: 组件化样式，动态生成样式，功能强大，适合大型项目，但性能开销和学习成本较高；

4. Tailwind CSS: 实用优先，快速开发 UI，适合所有项目，但类名冗长，灵活性受限；

1.1. 内联样式

通过 style 属性直接在组件中定义样式。

优势：