Tailwindcss 如何创建星级答案

【问题标题】：Tailwindcss how to create star ratingTailwindcss 如何创建星级
【发布时间】：2022-11-21 14:20:15
【问题描述】：

我尝试在 tailwindcss 中创建星级，我只知道我必须使用'peer'和'group'类

<div class="text-center">
  <span class="flex flex-row-reverse">
    <i class='peer'>start icon 1</i>
    <i class='peer'>start icon 2</i>
    <i class='peer'>start icon 3</i>
    <i class='peer'>start icon 4</i>
    <i class='peer'>start icon 5</i>
  </span>
</div>

【问题讨论】：

你到底想做什么？
老实说，你似乎希望有人为你完成 99% 的思考。您至少应该认真尝试一下。
做Google schema rating的前半部分，当star item和self star之前有star item color

标签： tailwind-css tailwind-ui

【解决方案1】：

你可以使用 css 在 tailwind 中创建自定义类

//tailwind.config

plugins: [
    function ({ addVariant }) {
      addVariant('stars-rating', '& i:hover ~ i')
    },
    function ({ addVariant }) {
      addVariant('current-hover', '& i:hover')
    },
  ],

第一个功能是给你悬停的前一个星星上色，第二个是给当前的星星上色

和 html

<div class="stars-rating:bg-yellow-400 current-hover:bg-yellow-400 flex h-screen w-screen flex-row-reverse items-center justify-center bg-slate-500">
  <i class="mx-1 rounded-full border border-yellow-400 p-1">start</i>
  <i class="mx-1 rounded-full border border-yellow-400 p-1">start</i>
  <i class="mx-1 rounded-full border border-yellow-400 p-1">start</i>
  <i class="mx-1 rounded-full border border-yellow-400 p-1">start</i>
  <i class="mx-1 rounded-full border border-yellow-400 p-1">start</i>
</div>

你可以看到这个例子：enter link description here

【讨论】：

非常感谢，我会在这里测试并找到答案

【解决方案2】：

您可以使用 peer-hover 修饰符来实现这样的结果

<div class="flex flex-row-reverse justify-center p-10">
  <i class="bg-yellow-100 peer peer-hover:bg-yellow-500 hover:bg-yellow-500 w-12 h-12 mx-2">1</i>
  <i class="bg-yellow-100 peer peer-hover:bg-yellow-500 hover:bg-yellow-500 w-12 h-12 mx-2">2</i>
  <i class="bg-yellow-100 peer peer-hover:bg-yellow-500 hover:bg-yellow-500 w-12 h-12 mx-2">3</i> 
  <i class="bg-yellow-100 peer peer-hover:bg-yellow-500 hover:bg-yellow-500 w-12 h-12 mx-2">4</i> 
  <i class="bg-yellow-100 peer peer-hover:bg-yellow-500 hover:bg-yellow-500 w-12 h-12 mx-2">5</i> 
</div>

DEMO

peer peer-hover:bg-yellow-500 将为所有下一个邻居着色，但不会为悬停元素本身着色 - 这就是为什么你需要 hover:bg-yellow-500。为了给前一个元素上色，使用小技巧 - 反转弹性行或在父元素上设置 dir="rtl" 属性

注意：你所有的星星都会被反转

【讨论】：