How to add a className dynamically in React.js with TailwindCSS?

Using Tailwind CSS with React.js to dynamically add className is a practical technique that allows us to adjust styles based on the component's state or props. Below, I'll demonstrate how to implement this with a specific example.

First, ensure that Tailwind CSS is installed and configured in your project. If not configured, follow the official Tailwind CSS documentation to install and configure it.

Next, we'll create a simple React component to demonstrate dynamic className adjustment. Suppose we have a button component, and we want to change its background color based on whether it has been clicked.

Example Code

jsx
import React, { useState } from 'react';

const DynamicButton = () => {
  // Use the useState hook to track the button's active state
  const [isActive, setIsActive] = useState(false);

  // Define a function to handle the click event
  const toggleButton = () => {
    setIsActive(!isActive);
  };

  return (
    <button
      // Dynamically change the className based on the value of isActive
      className={`p-4 text-white font-bold ${isActive ? 'bg-blue-500' : 'bg-gray-500'}`}
      onClick={toggleButton}
    >
      {isActive ? 'Active' : 'Inactive'}
    </button>
  );
};

export default DynamicButton;

In this example, we first import the useState hook to create a state variable named isActive, which tracks the button's active state. Next, we define a toggleButton function that toggles the isActive value when the button is clicked.

In the button element's className attribute, we use template string syntax to dynamically switch Tailwind's background color classes based on the value of isActive. If isActive is true, the button background is blue (bg-blue-500), otherwise it's gray (bg-gray-500).

Finally, the button text displays 'Active' or 'Inactive' based on the isActive state.

This approach enables flexible application of different Tailwind styles based on React component states or props, facilitating rich interactive effects and visual presentations.