Conditional classes with clsx and twMerge in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding clsx usage for conditional classes

What will be the value of className after running this code?

import clsx from 'clsx';

const isActive = true;
const isDisabled = false;

const className = clsx('btn', { 'btn-active': isActive, 'btn-disabled': isDisabled });

Tailwind

import clsx from 'clsx';

const isActive = true;
const isDisabled = false;

const className = clsx('btn', { 'btn-active': isActive, 'btn-disabled': isDisabled });

A "btn"

B "btn btn-disabled"

C "btn btn-active"

D "btn btn-active btn-disabled"

💡 Hint

clsx adds class names only if their condition is true.

clsx combines class names. It adds 'btn-active' because isActive is true. It skips 'btn-disabled' because isDisabled is false. So the result is 'btn btn-active'.

📝 Syntax

intermediate

Identify the syntax error in clsx usage

Which option contains a syntax error when using clsx to conditionally add classes?

Code snippet:

clsx('card', { 'card-highlighted': isHighlighted, 'card-error' isError })

A clsx('card', { 'card-highlighted': isHighlighted, 'card-error': isError })

B clsx('card', { 'card-highlighted': isHighlighted, 'card-error' isError })

C clsx('card', { 'card-highlighted': isHighlighted && true, 'card-error': isError })

D clsx('card', ['card-highlighted', isHighlighted], ['card-error', isError])

💡 Hint

Check the object syntax for key-value pairs.

Option B misses a colon between 'card-error' and isError, causing a syntax error. The others use correct syntax.

❓ rendering

advanced

What is the rendered class string after twMerge with conflicting Tailwind classes?

Given this code:

import { twMerge } from 'tailwind-merge';

const base = 'text-sm text-red-500';
const conditional = 'text-lg text-blue-500';

const merged = twMerge(base, conditional);

What is the value of merged?

A "text-lg text-blue-500"

B "text-lg text-red-500"

C "text-sm text-red-500"

D "text-sm text-red-500 text-lg text-blue-500"

💡 Hint

twMerge removes conflicting Tailwind classes, keeping the last one.

twMerge removes earlier conflicting font size and color classes. It keeps 'text-lg' and 'text-blue-500' from the second string.

❓ selector

advanced

Which option correctly combines clsx and twMerge for conditional Tailwind classes?

You want to conditionally add bg-red-500 if isError is true, and bg-green-500 if false, ensuring no conflicting classes remain.
Which code correctly does this?

A twMerge(clsx('p-4', isError ? 'bg-red-500' : 'bg-green-500'))

B clsx(twMerge('p-4', isError ? 'bg-red-500' : 'bg-green-500'))

C twMerge('p-4', clsx(isError && 'bg-red-500', !isError && 'bg-green-500'))

D clsx('p-4', twMerge(isError ? 'bg-red-500' : 'bg-green-500'))

💡 Hint

twMerge should be called last to resolve conflicts.

Option A calls clsx first to build the class string, then twMerge to remove conflicts. Others misuse the order or types.

❓ accessibility

expert

How to ensure accessible conditional styling with clsx and twMerge?

You have a button that changes background color based on isDisabled. Which approach best ensures the button remains accessible (focusable and readable) regardless of styles?

A Only change background color with clsx and twMerge, no ARIA attributes needed.

B Use clsx to add 'opacity-50' when disabled and remove keyboard focus with <code>tabIndex={-1}</code>.

C Disable the button element with <code>disabled</code> attribute and add conditional classes without ARIA.

D Use clsx and twMerge to add 'bg-gray-400' and 'cursor-not-allowed' when disabled, and add <code>aria-disabled="true"</code> on the button.

💡 Hint

Accessibility means signaling state to assistive tech and visual cues.

Option D uses visual cues (gray background, cursor change) and ARIA attribute to inform screen readers. Option D disables the button but misses ARIA for custom controls. Option D removes keyboard focus which harms accessibility.