---

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

dbt 
airflow

一、常用

1.1 字体

1. 字体大小

• 效果

2. 字体粗细

3. 文字位置

1.2 宽/高/背景/边框

1. 宽度

• w-full：为了让元素占满父类元素的宽度
• min-w-full: 最小宽度是父类的宽度，如果内容（表格）太多超出父类宽度，会触发滚动条
  

2. 背景

3. 边框

4. hover

5. 媒体查询

1.3 FlexBox

1. Flex布局

2. shrink

类名	等价 CSS	行为
flex-1	flex: 1 1 0%	自动扩张填满剩余空间
flex-auto	flex: 1 1 auto	会扩张，也会缩小，基础大小由内容决定
flex-initial	flex: 0 1 auto	不扩张，允许缩小，基础大小由内容决定
flex-none	flex: none	不扩张、不缩小，固定大小

3. Grid 布局

1.4 全局布局

1. 高度相关

2. 宽度相关

二、项目

2.1 创建项目

1. 创建react 项目

npm create vite@latest demo01

2. 添加tailwindcss4

npm install tailwindcss @tailwindcss/vite

3. vite.config里引入tailwind

2.2 项目实现

1. 权限

权限设计放在后端，前端只做显示

1. 角色权限：不同角色进入到后台后，菜单不同
2. 按钮和页面： 不同角色，页面的按钮，例如编辑和删除也不同，展示的图表信息不同

2. 路由守卫设置