Conditional classes with clsx and twMerge in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the clsx function correctly.

Tailwind

import [1] from 'clsx';

Drag options to blanks, or click blank then click option'

AtwMerge

BclassNames

Cclsx

Dclassnames

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'classNames' or 'classnames' which are different libraries.

Confusing 'twMerge' with 'clsx'.

The clsx function is imported by its exact name clsx from the 'clsx' package.

2fill in blank

medium

Complete the code to conditionally add the bg-blue-500 class only when isActive is true.

Tailwind

const buttonClass = clsx('text-white', [1] && 'bg-blue-500');

Drag options to blanks, or click blank then click option'

AisActive

BhasError

CisLoading

DisDisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated variables like 'isDisabled' or 'hasError'.

Forgetting to use a condition and always applying the class.

The class bg-blue-500 should appear only if isActive is true, so we use isActive as the condition.

3fill in blank

hard

Fix the error in merging classes by completing the code to use twMerge correctly.

Tailwind

const mergedClasses = twMerge('p-4', [1], 'p-2');

Drag options to blanks, or click blank then click option'

Aclsx('p-6')

Bclsx('p-2')

Cclsx('p-8')

Dclsx('p-4')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing plain strings instead of using clsx.

Using conflicting padding classes without merging.

Using clsx('p-4') merges with other classes, and twMerge will resolve conflicting padding classes, keeping the last one.

4fill in blank

hard

Fill both blanks to create a class string that conditionally adds text-red-500 if hasError is true and merges with baseClasses.

Tailwind

const classes = twMerge(baseClasses, clsx([1] && 'text-red-500', [2] && 'bg-blue-500'));

Drag options to blanks, or click blank then click option'

AhasError

BisActive

CisDisabled

Dloading

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the variables for error and active states.

Not using conditions properly inside clsx.

The first blank should be hasError to conditionally add the red text class. The second blank is isActive to add any other conditional classes if needed.

5fill in blank

hard

Fill all three blanks to create a merged class string that includes uppercase text if isUppercase is true, adds padding p-4, and conditionally adds bg-green-500 if isSuccess is true.

Tailwind

const finalClass = twMerge(clsx([1] && 'uppercase'), [2], clsx([3] && 'bg-green-500'));

Drag options to blanks, or click blank then click option'

AisUppercase

B'p-4'

CisSuccess

DisError

Attempts:

3 left

💡 Hint

Common Mistakes

Using variables instead of string for padding.

Mixing up success and error variables.

The first blank is isUppercase to conditionally add uppercase text. The second blank is the padding string 'p-4'. The third blank is isSuccess to conditionally add the green background.