The `className` prop and conditional styles

In React, Tailwind utilities are passed through className. Use template literals or a small conditional helper to express state. Keep class candidates complete and visible in source so Tailwind can detect them. When conditions become complex, prefer a variant map or a class composition utility rather than deeply nested ternaries.

A component's class string should describe presentation; the component's props should describe meaningful behavior or state. Avoid letting arbitrary user input become a class name.

Conditional task state

function TaskRow({ task }) {
  const titleClass = task.completed
    ? "text-slate-500 line-through"
    : "text-slate-900";

  return (
    <li className="flex items-start gap-3 rounded-xl border border-slate-200 p-4">
      <span className={task.completed ? "mt-1 size-2 rounded-full bg-emerald-500" : "mt-1 size-2 rounded-full bg-amber-500"} aria-hidden="true" />
      <div className="min-w-0">
        <p className={`font-medium ${titleClass}`}>{task.title}</p>
        <p className="mt-1 text-sm text-slate-600">{task.completed ? "Completed" : "In progress"}</p>
      </div>
    </li>
  );
}

💡 Both branches use full utility strings. The component maps data state to a visual state while retaining text that communicates completion independently of color and strikethrough.

Knowledge Check

Which approach is safest for conditional Tailwind classes?

The `className` prop and conditional styles

STAY UPDATED WITH BYTES!