TailWind CSS 响应式设计
前端
CSS
断点
TailWind CSS 内置了5个断点，用以适应不同的屏幕大小：
| 断点前缀 | 最小宽度 | CSS |
|---|---|---|
| sm | 640px | ‘(media?) (min-width: 640px) { … }’ |
| md | 768px | ‘(media?) (min-width: 768px) { … }’ |
| lg | 1024px | ‘(media?) (min-width: 1024px) { … }’ |
| xl | 1280px | ‘(media?) (min-width: 1280px) { … }’ |
| 2xl | 1536px | ‘(media?) (min-width: 1536px) { … }’ |
Tailwind 中的每个工具类都可以在不同的断点处有条件地应用。要添加工具但仅在特定断点处生效，你需要做的就是在工具前加上断点名称，后跟 : 字符：
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">移动端优先
默认情况下，Tailwind 使用移动设备优先的断点系统，类似于你在 Bootstrap 等其他框架中可能使用的系统。这意味着不带前缀的工具（如 uppercase）对所有屏幕尺寸都有效，而带前缀的工具（如 md:uppercase）仅在指定断点及以上的断点处生效。
有效范围
默认情况下，由md:flex 等规则应用的样式将应用于该断点并在较大的断点处保持应用。
如果你只想在特定断点范围处于活动状态时应用工具，请将响应式修改器（如 md）与 max-* 修改器堆叠在一起，以将该样式限制在特定范围内：
<div class="md:max-xl:flex">
<!-- ... -->
</div>