如何让Tailwind CSS flex布局中的绿色进度条左对齐？

你的问题出在进度条的宽度设置逻辑上——直接给进度条元素同时设置w-1/2（占父flex容器的50%宽度）和内联width:65%，导致进度条的宽度计算混乱，加上flex容器的自动压缩机制，最终让进度条看起来处于居中状态。

修改后的代码 #

需要把进度条放在一个固定宽度的中间容器内，让进度条的宽度相对于这个容器计算，就能实现左对齐效果：

<div class="flex flex-col space-y-4 p-2 w-full">
   <div class="flex space-x-2">
      <p class="w-1/4 text-sm"> python </p>
      <div class="w-1/2"> <!-- 中间固定宽度容器，占行的50% -->
         <div class="h-4 rounded-md mt-1 bg-green-400" style="width: 65%"></div> <!-- 进度条占容器的65%，默认左对齐 -->
      </div>
      <p class="w-1/4 text-sm"> 65 </p>
   </div>
   <div class="flex space-x-2">
      <p class="w-1/4 text-sm"> html </p>
      <div class="w-1/2">
         <div class="h-4 rounded-md mt-1 bg-green-400" style="width: 100%"></div>
      </div>
      <p class="w-1/4 text-sm"> 100 </p>
   </div>
</div>

贴合Tailwind风格的写法 #

可以把内联样式换成Tailwind自定义宽度类，更符合框架使用习惯：

<div class="flex flex-col space-y-4 p-2 w-full">
   <div class="flex space-x-2">
      <p class="w-1/4 text-sm"> python </p>
      <div class="w-1/2">
         <div class="h-4 rounded-md mt-1 bg-green-400 w-[65%]"></div>
      </div>
      <p class="w-1/4 text-sm"> 65 </p>
   </div>
   <div class="flex space-x-2">
      <p class="w-1/4 text-sm"> html </p>
      <div class="w-1/2">
         <div class="h-4 rounded-md mt-1 bg-green-400 w-full"></div>
      </div>
      <p class="w-1/4 text-sm"> 100 </p>
   </div>
</div>

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