Am I doing passing this prop wrong?

Question

I'm creating a website using react and tailwind CSS, I don't know why hover on button is not working. I added my custom colors all the props but hoverColor are okay, also I don't know why the react icon doesn't work for me.

import React from "react";


function Button(props) {

    return (
        <button
            className={`px-4 py-2 rounded w-max mx-2 ${props.bgColor} ${props.textColor} hover:${props.hoverColor}`}>
            {props.text}
        </button>

    );
}

export default Button;

import React from 'react';
import { IoPersonOutline } from "react-icons/io5";
import Button from './Button';




function Navbar() {

    return (
        <nav className="flex items-center justify-between h-16 bg-white px-4 shadow-sm">

            <div className="flex items-center my-2">


                <Button bgColor="bg-red" text="Post Ad"><span className="flex items-center gap-2"><IoPersonOutline /></span>
                </Button>
                <Button hoverColor='bg-gray' textColor='text-dark-gray' text='Blue' />
                <Button hoverColor='bg-light-gray' textColor='text-dark-gray' text='Blue' />
                <Button hoverColor='bg-light-gray' textColor='text-dark-gray' text='Blue' />

            </div>
            <div className="flex items-center my-2">

                <input type="text" placeholder="Searching in all..." className="px-4 py-2 rounded-md bg-light-gray text-current" />
                <Button textColor="text-dark-gray" text="Search" />
                <Button textColor="text-dark-gray" text="Settings" />

                <div className="sm:w-px h-8 mx-5 bg-gray"></div>
                <h1 className=" text-xl font-bold mr-2 text-red">Divar</h1>
            </div>
        </nav>
    );
}

export default Navbar;

I've done everything I know, but nothing has changed. Please let me know if you can identify what I'm doing wrong.

Answer 1

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

You could:

• Have the entire class in the variable you pass to hoverColor like

  <button
    className={`… ${props.hoverColor}`}>
  

  <Button hoverColor='hover:bg-gray' … />
  <Button hoverColor='hover:bg-light-gray' … />
  <Button hoverColor='hover:bg-light-gray' … />
  

• Have a dictionary for color to Tailwind class names:

  function Button(props) {
    const DICTIONARY = {
      'bg-gray': 'hover:bg-gray',
      'bg-light-gray': 'hover:bg-light-gray',
      // …
    };
    // …
    <button
      className={`… ${DICTIONARY[props.hoverColor]}`}>
  

• safelist the classes, if you have a limited number of known colors:

  module.exports = {
    safelist: [
      {
        pattern: /^bg-((light-)?gray)$/,
        variants: ['hover'],
      },
      // …
    ],
    // …
  ];