响应式与状态前缀
Tailwind 的响应式和状态控制都靠前缀实现，这是它最优雅的设计。响应式前缀：sm: md: lg: xl: 2xl:（默认无前缀 = 手机），同样是移动优先、「大于等于生效」。一行 HTML 就能表达「手机一列、平板两列、桌面四列」：grid-cols-1 md:grid-cols-2 lg:grid-cols-4，完全不用写媒体查询。
状态前缀：hover:（悬停）、focus:（聚焦）、active:（按下）、disabled:（禁用）。按钮三连：bg-blue-500 hover:bg-blue-700 disabled:opacity-50——正常蓝、悬停深蓝、禁用半透明，传统写法要三段 CSS，这里一行搞定。
前缀可以组合：先响应式后状态，如 md:hover:bg-red-500（md 以上悬停才变红）。书写顺序建议固定为「状态在前缀内、响应式在最外」，保持团队统一。Dark 模式的前缀 dark: 在深入篇详讲。
本节要点响应式前缀 sm~2xl 是「≥生效」，移动优先；状态前缀 hover/focus/disabled 免写 CSS；前缀可组合如 md:hover:bg-red-500。
代码
<!-- 响应式前缀：sm md lg xl 2xl（无前缀=手机，均≥生效） -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-4 rounded shadow">手机1列 平板2列 桌面4列</div>
<!-- 复制多份观察效果 -->
</div>
<!-- 状态前缀：hover / focus / active / disabled -->
<button class="bg-blue-500 text-white px-4 py-2 rounded
hover:bg-blue-700
focus:ring-2 focus:ring-blue-300
disabled:opacity-50">
悬停变深、聚焦光环、禁用半透明
</button>
<!-- 输入框聚焦样式 -->
<input class="border border-gray-300 rounded px-3 py-2
focus:border-blue-500 focus:outline-none">
<!-- 前缀组合：先响应式，再状态 -->
<p class="text-sm md:text-base lg:text-lg hover:text-blue-600">
响应式字号 + 悬停变色
</p>📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读