如果需要一个响应不同可视窗口宽度的布局容器，可以使用 tailwind 提供的 container 这个类。现在页面上白色背景的这个容器会占用它的父容器的所有宽度。 在这个容器上面添加一个 container。这个类会设置容器的宽度或者最大宽度。

调整一下浏览器窗口的尺寸，观察一下这个白色背景容器的宽度的变化，你会发现，它会随着浏览器窗口宽度的变化发生一些改变。

鼠标放在这个 container 类的上面，你会发现，它默认会把元素的宽度设置成 100%，然后又设置了一些媒体查询，比如窗口最小宽度是 640px 的时候，元素的最大宽度就会变成 640px，也就是当窗口宽度到达 640 像素的时候，元素的宽度就会发生变化。

这个 640 像素是 tailwind 框架设置的一个断点，在框架里会用 sm 表示它，表示 small，指的是小尺寸的设备。

下面这个媒体查询选择的是最小宽度 768px ，这种情况下，元素的最大宽度会设置成 768 像素。 这个 768 像素也是一个断点，在框架里用 md 表示，表示 medium ，指的是中等尺寸的设备，或者叫中等尺寸一的窗口宽度。

min-width 1024 像素，这个断点的名字叫 lg，表示 large， min-width 1280 像素，这个断点的名字是 xl ，extra large 表示超大号。 min-width 1536 像素，这个断点的名字是 2xl，指的是特大号。

让这个容器居中，可以把左右外边距设置成 auto，在元素上面添加一个 mx-auto 。