Tailwind CSS 3.2.4中basis（flex-basis）类失效，求原因与解决办法

Tailwind CSS 3.2.4完全支持flex-basis属性，不存在废弃情况，你的问题出在以下两点：

1. 样式冲突导致basis被覆盖 #

你给img标签同时设置了basis-8/12和w-16：

• basis-8/12是基于父容器宽度的2/3弹性基准
• w-16是固定4rem宽度

在flex布局中，默认的flex-shrink:1会让元素在父容器空间不足时收缩，此时固定宽度w-16会覆盖basis-8/12的弹性效果，导致后者看起来不生效。

2. 验证类是否被正确生成 #

检查编译后的CSS文件，确认.basis-8\/12类是否存在。如果缺失，执行以下操作：

• 清除视图缓存：php artisan view:clear（Laravel环境）
• 重新编译资源：npm run dev

修复方案 #

• 直接移除w-16类，仅保留basis-8/12，即可看到弹性基准的效果
• 如果需要固定宽度+弹性布局，替换w-16为basis-[16rem]，并可添加flex-shrink-0禁止元素收缩：

  <img class="basis-8/12 basis-[16rem] flex-shrink-0 mr-4" src="img/test.jpg">
  

• 你的Tailwind配置无异常：当前content路径已覆盖所有相关文件，theme.extend为空不会影响默认类生成，无需修改。

内容的提问来源于stack exchange，提问作者Robin van Rossum