如何使用Tailwind CSS创建星级评分？仅知晓需用到peer和group类

要实现可交互的星级评分，核心是利用Tailwind的peer类联动状态，配合隐藏的单选按钮记录选中值，再通过flex-row-reverse实现hover时的批量样式变化。以下是完整实现方案：

完整代码 #

<div class="text-center">
  <span class="flex flex-row-reverse gap-1">
    <!-- 5星 -->
    <input type="radio" name="rating" id="rating-5" class="peer sr-only" value="5">
    <label for="rating-5" class="text-gray-300 hover:text-yellow-400 peer-hover:text-yellow-400 peer-checked:text-yellow-400 cursor-pointer text-xl">★</label>
    <!-- 4星 -->
    <input type="radio" name="rating" id="rating-4" class="peer sr-only" value="4">
    <label for="rating-4" class="text-gray-300 hover:text-yellow-400 peer-hover:text-yellow-400 peer-checked:text-yellow-400 cursor-pointer text-xl">★</label>
    <!-- 3星 -->
    <input type="radio" name="rating" id="rating-3" class="peer sr-only" value="3">
    <label for="rating-3" class="text-gray-300 hover:text-yellow-400 peer-hover:text-yellow-400 peer-checked:text-yellow-400 cursor-pointer text-xl">★</label>
    <!-- 2星 -->
    <input type="radio" name="rating" id="rating-2" class="peer sr-only" value="2">
    <label for="rating-2" class="text-gray-300 hover:text-yellow-400 peer-hover:text-yellow-400 peer-checked:text-yellow-400 cursor-pointer text-xl">★</label>
    <!-- 1星 -->
    <input type="radio" name="rating" id="rating-1" class="peer sr-only" value="1">
    <label for="rating-1" class="text-gray-300 hover:text-yellow-400 peer-hover:text-yellow-400 peer-checked:text-yellow-400 cursor-pointer text-xl">★</label>
  </span>
</div>

关键细节说明 #

• 隐藏单选按钮：用sr-only类把radio按钮隐藏，只保留其交互和状态记录功能，不影响视觉呈现。
• 反向排列：flex-row-reverse让星星从右到左排列，这样当hover某颗星时，它左侧（视觉上右侧）的所有星星都会触发样式变化，符合星级评分的常规交互逻辑。
• peer类联动：给每个radio添加peer类，对应的label通过peer-hover和peer-checked监听radio的状态，实现hover时变色、选中后保持高亮的效果。
• 单选机制：所有radio的name属性设为同一个值（比如rating），确保同一时间只能选中一颗星。

如果需要替换为自定义图标（比如Font Awesome），直接把★换成图标标签即可，只要图标支持文本颜色样式控制就可以正常工作。

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