Tailwindcss how to create star rating - tailwind-css

Question

i try create star rating in tailwindcss,
I only know that I have to use 'peer' and 'group' class
<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>

Answer 1

you can use css to create customs class in tailwind
//tailwind.config
plugins: [
function ({ addVariant }) {
addVariant('stars-rating', '& i:hover ~ i')
},
function ({ addVariant }) {
addVariant('current-hover', '& i:hover')
},
],
the first function is to color the previous stars where you hover, the second one is to give color the current star
and the 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>
you can see the example: enter link description here

Answer 2

You may use peer-hover modifier to achieve such result
<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 will color all next neighbours but not hovered element itself while - that is why you need hover:bg-yellow-500. In order to color previous element use little trick - reverse flex row or set dir="rtl" attribute on a parent element
NOTE: all your stars will be reversed

Answer 3

The code I use is as follows
<div class="text-center">
<span class="flex flex-row-reverse">
<svg class="text-gray-600 cursor-pointer peer peer-hover:text-yellow-400 hover:text-yellow-400 duration-100 " width="23" height="23" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>
<svg class="text-gray-600 cursor-pointer peer peer-hover:text-yellow-400 hover:text-yellow-400 duration-100 " width="23" height="23" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>
<svg class="text-gray-600 cursor-pointer peer peer-hover:text-yellow-400 hover:text-yellow-400 duration-100 " width="23" height="23" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>
<svg class="text-gray-600 cursor-pointer peer peer-hover:text-yellow-400 hover:text-yellow-400 duration-100 " width="23" height="23" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>
<svg class="text-gray-600 cursor-pointer peer peer-hover:text-yellow-400 hover:text-yellow-400 duration-100 " width="23" height="23" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>
</span>
</div>
You can copy this code and test it in the link below TEST