Tailwind CSS 完整指南 MOC
Tailwind CSS 是一个实用优先的 CSS 框架，通过类名快速构建现代化界面。
📚 学习路径
阶段一：基础入门
目标：快速上手 Tailwind CSS，能够使用基础工具类构建简单页面
学习检查点：能够使用 Tailwind CSS 构建一个简单的响应式页面
阶段二：核心功能
目标：掌握 Tailwind CSS 的核心功能，能够高效开发
- 01-布局系统 — Flexbox、Grid、定位、容器查询
- 02-间距系统 — 内边距、外边距、间距工具类
- 03-颜色系统 — 颜色调色板、自定义颜色、透明度
- 04-字体与排版 — 字体大小、字重、行高、文本对齐
- 05-边框与圆角 — 边框样式、宽度、圆角
- 06-阴影与效果 — 阴影、模糊、透明度
- 07-响应式设计 — 断点系统、移动优先、响应式工具类
- 08-状态变体 — hover、focus、active、disabled 等
- 09-暗色模式 — 暗色模式配置与使用
阶段三：进阶特性
目标：掌握 Tailwind CSS 的高级特性，能够定制和扩展
- 01-配置与定制 — tailwind.config.js 配置、主题定制
- 02-自定义工具类 — 添加自定义工具类、插件开发
- 03-函数与指令 — @apply、@layer、@variants
- 04-JIT 模式 — Just-In-Time 编译、动态类名
- 05-内容配置 — content 配置、文件扫描、性能优化
- 06-插件系统 — 官方插件、社区插件、自定义插件
阶段四：实战应用
目标：能够使用 Tailwind CSS 构建完整的项目
- 01-常用组件 — 按钮、卡片、表单、导航栏等
- 02-布局模式 — 常见布局模式、响应式布局
- 03-动画与过渡 — 过渡效果、动画工具类
- 04-与框架集成 — React、Vue、Next.js 集成
- 05-最佳实践 — 代码组织、性能优化、可维护性
- 06-常见问题 — 常见问题与解决方案
🎯 快速参考
常用工具类速查
布局
- Flexbox:
flex,flex-col,items-center,justify-between - Grid:
grid,grid-cols-3,gap-4 - 定位:
relative,absolute,fixed,sticky
间距
- 内边距:
p-4,px-6,py-4 - 外边距:
m-2,mx-auto,my-8
颜色
- 背景:
bg-blue-500,bg-gray-100 - 文字:
text-white,text-gray-600 - 边框:
border,border-gray-300
响应式
- 断点:
sm:,md:,lg:,xl:,2xl: - 示例:
text-sm md:text-base lg:text-lg
状态变体
- 交互:
hover:bg-blue-600,focus:ring-2,active:scale-95 - 状态:
disabled:opacity-50,group-hover:
📖 专题索引
按主题快速查找
布局相关
样式相关
响应式相关
进阶相关
🚀 快速开始
5 分钟快速上手
-
安装 Tailwind CSS
npm install -D tailwindcss npx tailwindcss init -
配置 tailwind.config.js
module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, }, plugins: [], } -
添加 Tailwind 指令
@tailwind base; @tailwind components; @tailwind utilities; -
开始使用
<div class="bg-blue-500 text-white p-4 rounded-lg"> 你好，Tailwind CSS！ </div>
详细步骤请参考：快速开始
📚 学习资源
官方资源
- Tailwind CSS 官方文档
- Tailwind UI — 官方组件库
- Tailwind Play — 在线编辑器
推荐阅读
✅ 学习检查点
基础阶段
- 能够安装和配置 Tailwind CSS
- 理解工具类的命名规则
- 能够使用基础工具类构建简单页面
进阶阶段
- 掌握响应式设计
- 理解状态变体的使用
- 能够自定义主题和工具类
实战阶段
- 能够构建常用组件
- 能够与框架集成
- 理解最佳实践和性能优化
最后更新：2025
维护规范：详见项目根目录的目录结构规划