Bug: Resolve Tailwind classnames conflicts

[LoTerence]

Story

As developer using tailwind with react, we should have predictable css styling results when using conflicting Tailwind classnames.

Overview

Example:

• The Checkbox component should have "cursor-pointer" tailwind class when enabled, but have "cursor-not-allowed" class when disabled
• eg. className={clsx("cursor-pointer", disabled && "cursor-not-allowed")}
• when disabled is true, this gives us a full className string of "cursor-pointer cursor-not-allowed"
• The expected result is that "cursor-not-allowed" style property would override "cursor-pointer"
• The actual result is that no matter what order you put the class names in, "cursor-pointer" overrides "cursor-not-allowed". This means it will always be cursor-pointer even when the input is disabled.

This bug would also cause issues when trying to override component styles with className={clsx("original-tw-classnames", props.className)}.

See my comment about it here: Checkbox Component with Tailwind by bzzz-coding · Pull Request #654 · hackforla/CivicTechJobs · GitHub

The solution is to implement tailwind-merge package to resolve conflicting tailwind classnames like so: Understanding the Differences Between clsx, classnames, and twMerge in React and Tailwind CSS

Action Items

• Create a classname combiner function using clsx and tailwind-merge
• Implement this new combiner function in every component that passes down props.className to override original styles.

Example components: Checkbox component, Button component, CircleCard component

Resources/Instructions

Resources

[0-GoldenThunder]

I'm working at this bug. Thank you