---

---

项目地址

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

• 代码仓库地址：

• 所用到的框架和插件：

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. 高度相关

min-h-full

1. 默认无论自己多大，都会沾满父类
2. 当超出父类高度时，子类会根据自己内容增大，父类高度不发生变化

h-full

1. 无论子类内容大小，默认都会沾满整个父类
2. 当子类内容超出父类高度，超出部分会当作浮动处理
   

h-screen

• 初始化时，沾满整个视口高度
• 出现滚动条时，不会自动填充超出的部分，超出部分算浮动
  

min-h-screen

• 无论内容多少，都会沾满多有地方，包括滚动的地方

2. 宽度相关

二、项目

2.1 创建项目

1. 创建react 项目

npm create vite@latest demo01

2. 添加tailwindcss4

• 进入到项目里：运行

npm install tailwindcss @tailwindcss/vite

3. vite.config里引入tailwind

4. index.css里引入tailwind

• 一定要引入
  

5. 测试是否成功

• App.tsx里测试

import "./App.css";

function App() {
  return (
    <>
      <div className="bg-red-500 text-white text-3xl p-10">
        Tailwind is working 🎉
      </div>
    </>
  );
}

export default App;

2.2 实战

• 项目地址:

https://www.柚子.com/watch?v=AdcUinE5iYo&t=2s

1. 文字居中

• 主要方法：text-center mx-auto
  

2. flex后的水平间距

• 使用gap-10用于调整flex之后的元素或者grid之间的间距
  

3. 小图片位置和大小

• 控制关闭小图标的位置，为了不影响下面的元素位置，添加图表，引起下面ul的位置发生改变，可以使用绝对定位

4. State控制菜单的显示

1. 创建state用于存储true/false 来控制是否显示
2. 给图片绑定onclick方法，用户改变state的bool值
   

5. 不同大小的flex-col和row的排列

1. 移动端默认是纵向的flex，大屏之后需要并排显示
   

6.Grid 布局

• 用于处理有规律的盒子，比如商品列表等
  

7. 最大宽度使用