Tailwind教程

首页布局

container mx-auto:

<div className="container mx-auto">{children}</div>

container

• 开启容器布局，自带规则：
• 默认：宽度自适应屏幕，达到各断点最大宽度后不再继续加宽
• 作用：大屏限制内容最大宽度，小屏铺满屏幕，做页面版心。

mx-auto

• mx = margin-x（左右外边距） ， auto = 自动边距
• 让 container 容器在父容器里水平居中

整体作用

1. 移动端：容器100%铺满屏幕
2. 屏幕≥640px：容器宽度锁定对应断点宽度，左右自动留白、整体居中