Tailwind CSS flex布局下图片与文字底部对齐失效问题求助

问题排查方案 #

你遇到的是本地Tailwind运行环境和官方Play环境不一致导致的效果差异，按以下优先级排查即可：

1. 检查Tailwind配置
   打开项目根目录的tailwind.config.js，确认是否设置了preflight: false。
   Tailwind默认的preflight会重置浏览器默认样式，消除img行内元素默认的基线偏移问题，如果你的项目关闭了preflight，给img标签加block类即可解决，或者恢复preflight为默认开启状态。
2. 排查样式覆盖冲突
   打开浏览器开发者工具的元素面板，分别选中外层flex容器、img、span元素，检查最终生效的样式：

• 确认外层flex容器的align-items: flex-end属性未被其他更高优先级的样式划掉覆盖
• 确认img和span元素没有被全局自定义样式、第三方UI库的样式修改了布局属性

3. 重新编译并清空缓存
   你的项目使用Laravel Mix管理资源，运行npm run dev重新编译CSS文件，之后按Ctrl+F5强制刷新浏览器，避免本地缓存的旧样式生效。
4. 对齐Tailwind版本
   如果本地使用的是v1.x等极旧版Tailwind CSS，升级到和官方Play一致的v3.x版本即可保证类行为统一。

最简正确实现 #

flex布局下子元素不需要加align-bottom属性（该属性仅对非flex布局的行内元素生效），你可以直接使用以下简化代码：

<div class="flex items-end">
  <img src="/img/square.png" class="h-10">
  <span class="ml-4">align bottom text</span>
</div>

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