tailwind响应式断点前缀必须使用预设名（如sm、md）加下划线，如md:text-center；断点需与tailwind.config.js中theme.screens完全一致，且默认为最小宽度媒体查询，移动端优先。
响应式断点前缀怎么写才生效
必须配合 Tailwind 的预设断点名（如 sm、md、lg）加下划线放在类名前，比如 md:text-center 表示「在 medium 及以上屏幕宽度时居中对齐」。断点不是随便起的，得和 tailwind.config.js 里的 theme.screens 完全一致——默认是 { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' }，改过配置就得按新名字来。
常见错误现象：tablet:text-red-500 不生效（因为没定义 tablet 断点），或者 sm:hidden md:block 写反顺序导致小屏反而显示（Tailwind 是“最小宽度”断点，sm: 表示 ≥640px，不是“仅在 sm”）。
- 断点前缀只影响该类本身，不继承、不叠加，
sm:flex md:grid是两个独立规则 - 移动端优先：没加前缀的类（如
text-sm）默认在所有尺寸生效，从最小屏开始写 - 断点之间无自动覆盖关系，
sm:hidden lg:block在md尺寸仍会隐藏（因为没声明md:规则）
哪些 CSS 属性支持响应式前缀
几乎所有内置工具类都支持，包括布局（flex、grid）、间距（mt-4、px-6）、文字（text-lg、font-bold）、颜色（bg-blue-500）、可见性（hidden、block）等。但注意：伪类（如 hover:、focus:）和变体（如 dark:）可以和断点组合，顺序是「断点→变体→类名」，例如 md:hover:bg-gray-100。
不支持的典型情况：sm:@apply（@apply 是构建时指令，不能响应式）、sm::before（Tailwind 不生成伪元素响应式变体）、自定义 @layer 里写的原生 CSS 类也不会被自动加上断点媒体查询。
立即学习“前端免费学习笔记（深入）”；
- 组合顺序固定：断点必须最前，比如
lg:dark:hover:bg-black合法，dark:lg:bg-black无效 -
print:是个特例，它不是屏幕断点，而是打印样式，和sm:等互斥，不能混用 - 动态生成的类（如 JS 拼接字符串
className={`text-${size}`}）无法触发响应式，因为 Tailwind 构建时静态扫描不到
为什么加了断点类却没效果
大概率是 HTML 中漏写了 viewport meta 标签，导致移动端浏览器以桌面视口渲染，断点数值完全错位。必须确保 里有：
<meta name="viewport" content="width=device-width, initial-scale=1">
另一个高频坑：用 Vue/React 的条件渲染干扰了断点逻辑，比如 {isMobile && <span classname="text-red-500">...</span>}，这其实是在 JS 层做设备判断，和 Tailwind 的 CSS 媒体查询无关，既不可靠也不必要。
- 检查浏览器开发者工具的「Computed」面板，看对应属性是否被媒体查询包裹，没包就是类名没被识别（拼写错 / 断点未启用 / 构建未包含）
- 如果用了
content配置路径，确保 HTML 文件在扫描范围内，否则断点类根本不会被生成 - 自定义断点单位必须是
px或rem，写成em或百分比会导致构建报错或失效
如何安全地扩展或修改断点
直接改 tailwind.config.js 的 theme.screens 即可，但要注意两点：一是新增断点名不能和已有工具类冲突（比如别叫 text 或 flex），二是修改后必须重启开发服务器或重新构建，否则旧 CSS 文件里没有对应媒体查询。
常见场景：设计稿要求「平板横屏」单独处理，可以加一个 landscape 断点：
theme: { screens: { 'landscape': { raw: '(orientation: landscape)' } } }，然后用 landscape:hidden。但注意这种非宽度断点不会出现在默认的移动优先流中，要慎用。
- 删掉某个断点（比如不用
xl）不会出错，只是对应类名不生成 - 断点值支持对象写法（带
raw）或字符串，但字符串只接受像素值，不能写'min-width: 1200px' - 如果项目用 PostCSS 插件做了 purging，确保响应式类没被误删——检查
content是否包含所有模板文件路径
