# TailwindProject

**Repository Path**: sky0535/TailwindProject

## Basic Information

- **Project Name**: TailwindProject
- **Description**: Tailwind CSS 渐进式学习项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-23
- **Last Updated**: 2026-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Tailwind CSS 渐进式学习指南

这是一个基于 **Vite** 和 **Tailwind CSS v4** 构建的渐进式学习项目。旨在帮助初学者从零开始，循序渐进地掌握 Tailwind CSS 的核心概念、布局系统、响应式设计以及实战技巧。

## 📚 项目简介

本项目包含 12 个精心设计的章节（Page 01 - Page 12），每个章节都聚焦于 Tailwind CSS 的特定领域。通过实际的代码示例和交互式页面，你将学习如何高效地构建现代网页界面。

主要特性：
- ⚡️ **极速开发环境**：基于 Vite 构建，秒级启动。
- 🎨 **最新版本**：使用 Tailwind CSS v4，体验最新的特性和配置方式。
- 📱 **响应式设计**：从移动端到桌面端的全适配方案。
- 🌙 **深色模式**：完整的深色模式适配实战。
- 🧩 **模块化学习**：从基础排版到复杂布局，知识点结构清晰。

## 📂 目录结构

```
TailwindProject/
├── src/
│   ├── css/
│   │   └── main.css        # Tailwind CSS 入口文件
│   ├── page01/             # 01. 核心概念与排版
│   ├── page02/             # 02. 颜色与背景
│   ├── page03/             # 03. 边距与尺寸
│   ├── page04/             # 04. Flexbox 基础
│   ├── page05/             # 05. Flexbox 进阶
│   ├── page06/             # 06. Grid 布局基础
│   ├── page07/             # 07. Grid 布局进阶
│   ├── page08/             # 08. 响应式设计
│   ├── page09/             # 09. 状态修饰符 (Hover/Focus)
│   ├── page10/             # 10. 过渡与动画
│   ├── page11/             # 11. 深色模式 (Dark Mode)
│   └── page12/             # 12. 实战项目 (个人资料卡片)
├── index.html              # 项目首页（导航中心）
├── vite.config.js          # Vite 多页面构建配置
└── package.json            # 项目依赖与脚本
```

## 🚀 快速开始

### 1. 安装依赖

确保你的环境中已安装 Node.js。在项目根目录下运行：

```bash
npm install
```

### 2. 启动开发服务器

启动本地开发环境，实时预览修改效果：

```bash
npm run dev
```

打开浏览器访问 `http://localhost:5173`（端口可能不同，请查看终端输出）。

### 3. 构建生产版本

构建用于生产环境的静态文件：

```bash
npm run build
```

构建产物将输出到 `dist/` 目录。

## 📖 课程大纲

| 章节 | 标题 | 核心知识点 |
| :--- | :--- | :--- |
| **基础篇** | | |
| 01 | 核心概念与排版 | `text-sm`, `font-bold`, `text-center`, `leading-tight` |
| 02 | 颜色与背景 | `text-blue-500`, `bg-slate-100`, `bg-opacity-50`, `bg-gradient-to-r` |
| 03 | 边距与尺寸 | `m-4`, `p-4`, `w-full`, `h-screen`, `max-w-md` |
| **布局篇** | | |
| 04 | Flexbox 基础 | `flex`, `flex-col`, `justify-center`, `items-center` |
| 05 | Flexbox 进阶 | `flex-1`, `grow`, `shrink`, `order-last` |
| 06 | Grid 布局基础 | `grid`, `grid-cols-3`, `gap-4` |
| 07 | Grid 布局进阶 | `col-span-2`, `row-span-2`, `col-start-1` |
| **进阶篇** | | |
| 08 | 响应式设计 | `sm:`, `md:`, `lg:`, `xl:` 断点前缀的使用 |
| 09 | 状态修饰符 | `hover:`, `focus:`, `active:`, `group-hover:`, `peer-checked:` |
| 10 | 过渡与动画 | `transition`, `duration-300`, `animate-bounce`, `transform` |
| **高级与实战** | | |
| 11 | 深色模式 | `dark:bg-slate-900`, `dark:text-white`, JS 切换逻辑 |
| 12 | 实战项目 | 综合运用所学知识，构建个人资料卡片组件 |

## 🛠️ 技术栈

- [Vite](https://vitejs.dev/) - 下一代前端构建工具
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架

---
© 2026 Tailwind CSS 学习项目