Anyone has advice on how to go about creating a background color change hover event using tailwind?

Question

I have some images in circles that I'm wanting to create a background color change event for. I would like the background to correspond with the color of each image, but I'm still a bit new to tailwind and how it doesn't use classNames the same way. Could anyone tell me what's the most optimal way of creating this? He's my current code for the images.

Skills.jsx

mport React from 'react'
import image1 from '../assets/images/html.png'
import image2 from '../assets/images/css.png'
import image3 from '../assets/images/javascript.png'
import image4 from '../assets/images/react.png'
import image5 from '../assets/images/typescript.png'
import image6 from '../assets/images/tailwind.png'


const Skills = () => {

    const images = [
        {
            id: 1, 
            img: image1,
            name: 'HTML 5'
        },
        {
            id: 2, 
            img: image2,
            name: 'CSS 3'
        },
        {
            id: 3, 
            img: image3,
            name: 'Javascript'
        },
        {
            id: 4, 
            img: image4,
            name: 'React'
        },
        {
            id: 5, 
            img: image5,
            name: 'Typescript'
        },
        {
            id: 6, 
            img: image6,
            name: 'Tailwind'
        },
    ]

  return (
    <div>
        <div className='grid grid-cols-3 gap-8 mt-10 m-auto max-sm:grid-cols-1 max-lg:grid-cols-2'>
            {images.map((image) => (
                <div key={image.id} className='h-full w-full flex flex-col items-center justify-center rounded-full p-2 mr-5 shadow-xl bg-neutral-50 '>
                    <img src={image.img} alt={image.name} className='w-4/12 h-4/12  my-5 justify-center items-center ' />
                    <h2 className=''>{image.name}</h2>
                </div>
            ))}
        </div>
    </div>
  )
}

export default Skills

Image of Skills

Hoping to be able to have the background change to a color that matches the image. Like CSS's background becoming blue when hovered over.

Answer 1

Short answer: use modifiers to change the background colour on hover.

You could append the necessary Tailwind utilities with the required modifier to the elements in your list, and then use that property in the loop where you're rendering the elements.

For instance, to make CSS's background blue on hover, you could have the following:

// your list
{
  // ...
  name: 'CSS 3',
  class: 'hover:bg-blue-500'
}

// then inside the loop
<div className={`flex ${image.class}`}>

In the future, make sure to perform a search in the documentation of the library that you're using. In this case, searching for "hover" on Tailwind's website yields the solution, with examples.

Lastly, just a quick tip, asking questions with absolutes or superlatives (like "most optimal") usually makes it hard to answer so avoid using it if possible.