Tailwind CSS响应式断点text-center/text-left不生效问题

你写的类名逻辑本身符合Tailwind移动端优先的设计规则：无断点前缀的text-center默认在所有视口宽度生效，带sm:前缀的sm:text-left本应在视口宽度≥640px（sm断点默认值）时覆盖前序样式，实现大屏左对齐。所有断点下标题始终居中，本质是sm:text-left样式没有正常生效，常见原因按出现概率排序如下：

• 非JSX环境错用类名属性：如果代码不是写在React/Preact这类使用JSX语法的框架中，而是原生HTML、Vue模板等环境，绑定类名必须用class="..."而非className="..."。属性名写错后所有写在里面的Tailwind类都不会生效，你看到的居中效果来自浏览器默认样式或其他全局CSS，响应式规则自然也不起作用。
• 存在高优先级的全局居中规则：如果全局CSS中给h1标签或通用选择器设置了text-align: center !important，Tailwind生成的工具类优先级低于带!important的自定义规则，会始终被覆盖为居中状态。
• Tailwind构建扫描路径配置错误：如果tailwind.config.js里的content字段没有覆盖到你存放这段代码的文件路径，Tailwind构建时不会扫描到对应类名，就不会生成对应的CSS。这种情况通常连text-center都不会生效，只有当其他被扫描的文件里恰好用到了text-center但没用到sm:text-left时，才会出现只有居中类生效的现象。
• 断点自定义配置错误：如果你修改过tailwind.config.js里的screens配置项，比如把sm断点的触发逻辑改成了max-width判断，或者把sm断点的宽度阈值设得远大于你测试时的最大窗口宽度，会导致sm:text-left始终达不到触发条件。
• 漏加视口适配标签：如果HTML的<head>中没有添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，移动端浏览器会用默认980px宽度的虚拟视口渲染页面，不过这种情况通常会导致移动端也触发sm断点显示左对齐，和你描述的现象不符，排查时放在最后验证即可。

1. 打开浏览器开发者工具，选中对应h1元素，在Styles面板查看是否存在@media (min-width: 640px) .sm\:text-left规则，以及该规则是否被其他样式划掉覆盖。
2. 如果完全找不到这个sm响应式规则，先检查类名绑定的属性名是否写对（非JSX环境用class），再核对tailwind.config.js的content配置是否覆盖当前文件，重新执行构建命令后测试。
3. 如果能找到sm规则但被划掉，向上查找优先级更高的text-align样式，移除不合理的全局!important规则即可。
4. 如果sm断点的媒体查询阈值和预期不符，检查screens配置项是否被错误修改。

内容的提问来源于stack exchange，提问作者kuldeep singh