如何在Tailwind CSS中为range输入框添加下方刻度标签

你可以通过外层容器包裹输入框+底部独立刻度层的方式实现需求，完整实现代码如下：

<div class="flex justify-center min-h-screen bg-black p-12">
  <!-- range组件容器，保证输入框和刻度宽度对齐 -->
  <div class="w-full">
    <input 
      type="range" 
      min="0" 
      max="100"
      class="appearance-none w-full h-0.5 bg-gray-400 rounded outline-none
      /* 兼容webkit内核浏览器滑块样式 */
      [&::-webkit-slider-thumb]:appearance-none 
      [&::-webkit-slider-thumb]:w-4 
      [&::-webkit-slider-thumb]:h-4 
      [&::-webkit-slider-thumb]:rounded-full 
      [&::-webkit-slider-thumb]:bg-white
      [&::-webkit-slider-thumb]:cursor-pointer
      /* 兼容火狐浏览器滑块样式 */
      [&::-moz-range-thumb]:w-4
      [&::-moz-range-thumb]:h-4
      [&::-moz-range-thumb]:rounded-full
      [&::-moz-range-thumb]:border-none
      [&::-moz-range-thumb]:bg-white
      [&::-moz-range-thumb]:cursor-pointer
      "
    />
    <!-- 刻度层 -->
    <div class="flex justify-between w-full px-2 mt-2">
      <div class="flex flex-col items-center gap-1">
        <span class="w-0.5 h-2 bg-white"></span>
        <span class="text-xs text-white">0</span>
      </div>
      <div class="flex flex-col items-center gap-1">
        <span class="w-0.5 h-2 bg-white"></span>
        <span class="text-xs text-white">20</span>
      </div>
      <div class="flex flex-col items-center gap-1">
        <span class="w-0.5 h-2 bg-white"></span>
        <span class="text-xs text-white">40</span>
      </div>
      <div class="flex flex-col items-center gap-1">
        <span class="w-0.5 h-2 bg-white"></span>
        <span class="text-xs text-white">60</span>
      </div>
      <div class="flex flex-col items-center gap-1">
        <span class="w-0.5 h-2 bg-white"></span>
        <span class="text-xs text-white">80</span>
      </div>
      <div class="flex flex-col items-center gap-1">
        <span class="w-0.5 h-2 bg-white"></span>
        <span class="text-xs text-white">100</span>
      </div>
    </div>
  </div>
</div>

关键实现说明：

• 输入框和刻度层放在同一个父容器内，保证两者宽度完全对齐，避免刻度和滑块位置错位
• 刻度外层用justify-between实现刻度自动均匀分布，无需手动计算每个刻度的间距
• 代码中使用Tailwind的任意选择器语法兼容了webkit、火狐内核的滑块样式，无需额外编写全局CSS
• 刻度层添加的px-2内边距是为了让首尾刻度和滑块的滑动边界对齐，避免边缘标签偏移
• 如果需要动态生成刻度，只需根据range的min、max、步长值循环生成对应刻度项即可

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