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.

Practice

1. What is the main purpose of using clsx in a Tailwind CSS project?

easy

A. To conditionally combine multiple class names into one string

B. To automatically generate Tailwind CSS classes

C. To minify CSS files for faster loading

D. To replace Tailwind CSS with custom styles

Solution

1. Step 1: Understand clsx functionality

   clsx is a utility that helps combine class names conditionally, making it easier to apply classes based on logic.

2. Step 2: Compare options

   Only To conditionally combine multiple class names into one string correctly describes clsx's purpose. Other options describe unrelated tasks.

3. Final Answer:

   To conditionally combine multiple class names into one string -> Option A

4. Quick Check:

   clsx combines classes conditionally = C [OK]

Hint: clsx joins classes based on conditions, like a smart list builder [OK]

Common Mistakes:

• Thinking clsx generates CSS classes
• Confusing clsx with CSS minifiers
• Assuming clsx replaces Tailwind CSS

2. Which of the following is the correct syntax to use clsx to conditionally add the class bg-blue-500 only when isActive is true?

easy

A. clsx('bg-blue-500' && isActive)

B. clsx({ 'bg-blue-500': isActive })

C. clsx('bg-blue-500' || isActive)

D. clsx(bg-blue-500: isActive)

Solution

1. Step 1: Recall clsx conditional syntax

   clsx accepts an object where keys are class names and values are booleans to include or exclude classes.

2. Step 2: Analyze each option

   clsx({ 'bg-blue-500': isActive }) uses the correct object syntax. Options B and C misuse logical operators, and D has invalid syntax.

3. Final Answer:

   clsx({ 'bg-blue-500': isActive }) -> Option B

4. Quick Check:

   clsx uses object with class:condition = A [OK]

Hint: Use object syntax { 'class-name': condition } with clsx [OK]

Common Mistakes:

• Using logical operators inside clsx incorrectly
• Missing quotes around class names
• Writing invalid object syntax

3. Given the code snippet:

import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';

const isPrimary = true;
const isDisabled = false;

const buttonClass = twMerge(clsx('px-4 py-2', {
  'bg-blue-500': isPrimary,
  'bg-gray-400': !isPrimary,
  'opacity-50 cursor-not-allowed': isDisabled
}));

console.log(buttonClass);

What will be printed in the console?

medium

A. "px-4 py-2 bg-blue-500"

B. "px-4 py-2 bg-gray-400 opacity-50 cursor-not-allowed"

C. "px-4 py-2 bg-blue-500 opacity-50 cursor-not-allowed"

D. "px-4 py-2 bg-gray-400"

Solution

1. Step 1: Evaluate clsx conditions

   isPrimary is true, so 'bg-blue-500' is included; !isPrimary is false, so 'bg-gray-400' is excluded; isDisabled is false, so 'opacity-50 cursor-not-allowed' is excluded.

2. Step 2: Apply twMerge

   twMerge cleans conflicting classes but here only 'bg-blue-500' is present, so no conflicts to resolve.

3. Final Answer:

   "px-4 py-2 bg-blue-500" -> Option A

4. Quick Check:

   clsx + twMerge output = "px-4 py-2 bg-blue-500" [OK]

Hint: Check boolean flags carefully, then apply twMerge to clean conflicts [OK]

Common Mistakes:

• Including classes with false conditions
• Ignoring twMerge effect on conflicting classes
• Mixing up true/false conditions

4. Identify the error in this code snippet using clsx and twMerge:

const isActive = true;
const classes = twMerge(clsx('text-white', {
  'bg-red-500': isActive,
  'bg-green-500' isActive === false
}));
console.log(classes);

medium

A. isActive variable is not defined

B. Using twMerge incorrectly without importing

C. clsx cannot accept objects as arguments

D. Missing comma between object properties inside clsx

Solution

1. Step 1: Check object syntax inside clsx

   Inside the object, properties must be separated by commas. The line 'bg-green-500' isActive === false lacks a comma after the first property.

2. Step 2: Verify other parts

   twMerge usage is correct assuming import exists, clsx accepts objects, and isActive is defined.

3. Final Answer:

   Missing comma between object properties inside clsx -> Option D

4. Quick Check:

   Object properties need commas = D [OK]

Hint: Check commas between object properties in clsx [OK]

Common Mistakes:

• Forgetting commas between object keys
• Assuming clsx can't take objects
• Ignoring variable definitions

5. You want to create a button that is bg-red-500 when error is true, bg-green-500 when success is true, and bg-gray-300 otherwise. Using clsx and twMerge, which code correctly applies these classes without conflicts?

hard

A. twMerge(clsx('px-4 py-2', {
'bg-red-500': error,
'bg-green-500': success,
'bg-gray-300': !error && !success
}))

B. clsx(twMerge('px-4 py-2'), {
'bg-red-500': error,
'bg-green-500': success,
'bg-gray-300': !error && !success
})

C. twMerge(clsx('px-4 py-2', error ? 'bg-red-500' : success ? 'bg-green-500' : 'bg-gray-300'))

D. clsx('px-4 py-2', error && 'bg-red-500', success && 'bg-green-500', !error && !success && 'bg-gray-300')

Solution

1. Step 1: Understand class conflicts

   Only one background color class should be applied at a time to avoid conflicts.

2. Step 2: Analyze each option

   twMerge(clsx('px-4 py-2', { 'bg-red-500': error, 'bg-green-500': success, 'bg-gray-300': !error && !success })) uses clsx with multiple conditional classes that can conflict; twMerge will merge but logic is less clear. twMerge(clsx('px-4 py-2', error ? 'bg-red-500' : success ? 'bg-green-500' : 'bg-gray-300')) uses nested ternary to pick exactly one class, then twMerge cleans up. clsx(twMerge('px-4 py-2'), { 'bg-red-500': error, 'bg-green-500': success, 'bg-gray-300': !error && !success }) misuses clsx and twMerge order. clsx('px-4 py-2', error && 'bg-red-500', success && 'bg-green-500', !error && !success && 'bg-gray-300') uses clsx but may add multiple bg classes simultaneously.

3. Step 3: Choose best practice

   twMerge(clsx('px-4 py-2', error ? 'bg-red-500' : success ? 'bg-green-500' : 'bg-gray-300')) cleanly selects one bg class and uses twMerge properly.

4. Final Answer:

   twMerge(clsx('px-4 py-2', error ? 'bg-red-500' : success ? 'bg-green-500' : 'bg-gray-300')) -> Option C

5. Quick Check:

   Use ternary for exclusive classes + twMerge = B [OK]

Hint: Use ternary to pick one class, then twMerge to clean conflicts [OK]

Common Mistakes:

• Applying multiple conflicting bg classes at once
• Wrong order of clsx and twMerge calls
• Not ensuring only one bg class is active