When working with React and Tailwind CSS, you use Tailwind's utility classes directly within your JSX elements to style your components. Instead of writing custom CSS or using class selectors, you simply add Tailwind classes to the className attribute of your JSX tags. This approach keeps your styling close to your component logic and helps you move quickly without context-switching between CSS and JavaScript files.

To add Tailwind classes, use the className attribute (not class, which is reserved in JavaScript). For example, if you want to create a button with a blue background, white text, and rounded corners, your JSX might look like this:

<button className="bg-blue-500 text-white rounded px-4 py-2">
  Click Me
</button>

You can combine as many Tailwind classes as you need, separated by spaces, to achieve the desired design. Here are some tips for writing clean, maintainable class lists:

• Group related classes together, such as spacing, color, and typography;
• Avoid duplicating conflicting classes (for example, do not use both bg-blue-500 and bg-red-500 on the same element);
• Use multiline strings for long class lists to improve readability, especially for complex components.

Sometimes, you want to apply classes conditionally—such as adding a highlight if a button is active, or hiding an element based on state. In React, you can use JavaScript expressions within the className attribute to merge and conditionally apply classes. This makes your components dynamic and responsive to state or props.

A common approach is to use template literals and ternary operators. For instance, to highlight a button when it is active:

<button
  className={
    "px-4 py-2 rounded " +
    (isActive ? "bg-green-500 text-white" : "bg-gray-200 text-black")
  }
>
  Save
</button>

Alternatively, you can use array joining or helper functions to manage more complex class merging. The key is to keep your logic clear and avoid cluttering your JSX with too many nested expressions.

Best practices include:

• Keeping conditional logic simple and readable within className;
• Abstracting complex class merging into helper functions if needed;
• Always using className (never class) in JSX for compatibility with React.

This workflow lets you take full advantage of Tailwind's utility-first approach while leveraging React's power for dynamic UIs.

When merging Tailwind classes in React, you often need to decide which classes to apply based on component state or props. By using JavaScript expressions inside the className attribute, you can control which classes are included at render time. This is particularly useful for toggling between different visual states, such as active/inactive or error/success.

For example, you might want to apply a border color only when an input has an error:

<input
  className={
    "block w-full px-3 py-2 border rounded " +
    (hasError ? "border-red-500" : "border-gray-300")
  }
/>

In this example, the border-red-500 class is only added if hasError is true; otherwise, the input uses the default border color. This pattern can be expanded with more complex conditions, but clarity should always be your priority.

If you need to merge several conditional classes, consider using array syntax and joining:

<div
  className={[
    "p-4",
    isActive ? "bg-blue-100" : "bg-white",
    isDisabled && "opacity-50"
  ].filter(Boolean).join(" ")}
>
  Panel Content
</div>

This approach makes it easy to add or remove classes based on multiple conditions without producing extra spaces or undefined values in your class list.

Remember:

• Always use JavaScript expressions for conditional classes;
• Prefer clarity and maintainability over cleverness;
• Avoid adding the same type of utility class multiple times, as only the last one will apply.