React与Tailwind CSS知识点汇总
专为编程小白准备的通俗易懂指南，包含核心概念和实用技巧
React
Tailwind CSS
组件开发
React基础知识
JSX – 看起来像HTML的JavaScript
JSX是React的核心语法，它允许你在JavaScript代码中写HTML。这就像在JavaScript中直接写网页结构一样。
const element = <h1 className=”title”>你好，React!</h1>;
注意：在JSX中，使用className代替class，因为class是JavaScript的保留字
组件 – 网页的积木块
组件是React的核心概念。你可以把整个网页拆分成多个小组件，每个组件负责一部分功能。
function Welcome() {
return <h1>欢迎来到我的网站!</h1>;
}
// 使用组件
<Welcome />
return <h1>欢迎来到我的网站!</h1>;
}
// 使用组件
<Welcome />
Props – 组件之间的传话方式
Props（属性）是父组件向子组件传递数据的方式，就像给朋友传递纸条一样。
function Greeting(props) {
return <h1>你好, {props.name}!</h1>;
}
// 使用组件并传递name属性
<Greeting name=”小明” />
return <h1>你好, {props.name}!</h1>;
}
// 使用组件并传递name属性
<Greeting name=”小明” />
State – 组件的记忆
State（状态）是组件内部的数据存储，当state改变时，组件会自动重新渲染。
function Counter() {
const [count, setCount] = useState(0); // 初始化count为0
return (
<div>
<p>点击次数: {count}</p>
<button onClick={() => setCount(count + 1)}>
点我增加
</button>
</div>
);
}
const [count, setCount] = useState(0); // 初始化count为0
return (
<div>
<p>点击次数: {count}</p>
<button onClick={() => setCount(count + 1)}>
点我增加
</button>
</div>
);
}
Tailwind CSS基础知识
什么是Tailwind CSS？
Tailwind是一个实用优先的CSS框架，它提供了一组低级别的实用类，让你可以直接在HTML中构建任何设计。
传统方式：在CSS文件中写样式
Tailwind方式：直接在HTML中使用类名添加样式
核心概念：实用类
Tailwind有数千个实用类，每个类通常只负责一个CSS属性。
传统CSS
.btn {
background-color: #3B82F6;
padding: 8px 16px;
border-radius: 0.25rem;
}
background-color: #3B82F6;
padding: 8px 16px;
border-radius: 0.25rem;
}
Tailwind CSS
<button class=”bg-blue-500 py-2 px-4 rounded”>
点击这里
</button>
点击这里
</button>
常用Tailwind类
| 类别 | 示例 | 说明 |
|---|---|---|
| 布局 | flex, grid, block, hidden | 控制元素显示方式 |
| 间距 | m-4, p-2, space-x-4 | 控制外边距(margin)和内边距(padding) |
| 尺寸 | w-16, h-full, max-w-md | 控制宽度、高度和最大尺寸 |
| 颜色 | bg-blue-500, text-gray-800 | 设置背景色和文字颜色 |
| 响应式 | md:flex, lg:w-1/2 | 根据屏幕尺寸应用不同样式 |
响应式设计
Tailwind使用移动优先的断点系统，可以轻松创建响应式布局。
<div class=”w-full md:w-1/2 lg:w-1/3″>
在小屏幕上宽度100%，中等屏幕50%，大屏幕33%
</div>
在小屏幕上宽度100%，中等屏幕50%，大屏幕33%
</div>
Tailwind默认断点：sm:640px, md:768px, lg:1024px, xl:1280px, 2xl:1536px
React组件开发
创建可复用按钮组件
在React中结合Tailwind创建可复用的按钮组件：
function Button({ children, variant = ‘primary’ }) {
const baseClasses = “py-2 px-4 rounded font-medium transition”;
const variantClasses = {
primary: “bg-blue-500 hover:bg-blue-600 text-white”,
secondary: “bg-gray-200 hover:bg-gray-300 text-gray-800”,
danger: “bg-red-500 hover:bg-red-600 text-white”
};
return (
<button className={`${baseClasses} ${variantClasses[variant]}`}>
{children}
</button>
);
}
const baseClasses = “py-2 px-4 rounded font-medium transition”;
const variantClasses = {
primary: “bg-blue-500 hover:bg-blue-600 text-white”,
secondary: “bg-gray-200 hover:bg-gray-300 text-gray-800”,
danger: “bg-red-500 hover:bg-red-600 text-white”
};
return (
<button className={`${baseClasses} ${variantClasses[variant]}`}>
{children}
</button>
);
}
使用效果：
在组件中使用：
<Button variant=”primary”>保存</Button>
<Button variant=”secondary”>取消</Button>
<Button variant=”danger”>删除</Button>
<Button variant=”secondary”>取消</Button>
<Button variant=”danger”>删除</Button>
创建卡片组件
使用Tailwind创建美观的卡片组件：
function Card({ title, children }) {
return (
<div className=”bg-white rounded-xl shadow-md overflow-hidden”>
<div className=”p-6″>
<h3 className=”text-xl font-bold mb-2″>{title}</h3>
<div className=”text-gray-600″>
{children}
</div>
</div>
</div>
);
}
return (
<div className=”bg-white rounded-xl shadow-md overflow-hidden”>
<div className=”p-6″>
<h3 className=”text-xl font-bold mb-2″>{title}</h3>
<div className=”text-gray-600″>
{children}
</div>
</div>
</div>
);
}
使用效果：
产品卡片
这是一个使用Tailwind CSS样式化的卡片组件示例。它包含标题和内容区域，适合展示各种信息。
实用技巧与最佳实践
1 使用@apply提取重复样式
当某些Tailwind类经常一起使用时，可以使用@apply将它们提取到CSS类中：
.btn {
@apply py-2 px-4 rounded font-medium transition;
}
.btn-primary {
@apply bg-blue-500 hover:bg-blue-600 text-white;
}
@apply py-2 px-4 rounded font-medium transition;
}
.btn-primary {
@apply bg-blue-500 hover:bg-blue-600 text-white;
}
2 响应式设计的技巧
- 使用移动优先原则：先设计移动端样式，再用md:、lg:等添加大屏样式
- 隐藏元素：
hidden md:block表示在小屏隐藏，大屏显示 - 使用flex-wrap和grid实现自适应布局
- 利用space-x-*和space-y-*控制元素间距
3 保持代码整洁
- 使用Prettier插件自动格式化代码
- 长类名可以换行显示，保持可读性
- 为复杂的组件创建子组件
- 使用Tailwind的自定义配置统一设计规范
4 调试技巧
- 使用浏览器开发者工具检查元素应用的样式
- 添加
border border-red-500快速查看元素边界 - 使用
bg-red-100/50这样的半透明背景调试布局 - 安装Tailwind CSS IntelliSense插件获得自动完成
实时组件预览
信息卡片
这是一个使用Tailwind CSS样式化的卡片组件示例。