Why Conditional Class Utilities Might Not Be Necessary

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

MDN Web Docs.

Common pseudo classes include hover, disabled, active.

TailwindCSS has first class support for pseudo class modifiers. This means that:

Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target.

Handling Hover, Focus, And Other States

As I discuss in [[A Design System Worthy Tag Component For Kwicherbelliaken#What is CLSX?]] utilities like clsx and classnames’s job is to:

… make dynamic and conditional className props simpler to work with (especially more so than conditional string manipulation).

classnames README

But they can be abused to apply conditional styles that are already accommodated by TailwindCSS’s support for pseudo class modifiers.

1
<Button
2
  isDisabled={isSaveDisabled}
3
  className={classNames(
4
    'text-sm inline-flex justify-center ...',
5
    { 'cursor-not-allowed bg-opacity-50': isSaveDisabled }
6
  )}
7
>

A simpler approach, and one that leverages TailwindCSS’s disabled pseudo class modifiers, which makes the need for the classNames utility redundant.

1
<Button
2
  isDisabled={isSaveDisabled}
3
  className="... disabled:cursor-not-allowed disabled:bg-opacity-50"
4
>

But this is not to say they don’t have an application and aren’t useful. Say we now needed to handle a loading state for this Button, well this is where this utility becomes very helpful:

1
<Button
2
  isDisabled={isSaveDisabled}
3
  className={classNames(
4
    '... disabled:cursor-not-allowed disabled:bg-opacity-50',
5
    { 'bg-blue-50 animate': isLoading }
6
  )}
7
>

There are of course more real world examples to be found:

1
<Modal
2
  className={({ isEntering, isExiting }) =>
3
    classNames(
4
      "tw-w-full tw-max-w-md tw-overflow-hidden tw-rounded-2xl tw-p-6 tw-text-left tw-align-middle",
5
      {
6
        "tw-animate-in tw-zoom-in-95 tw-ease-out tw-duration-300": isEntering,
7
        "tw-animate-out tw-zoom-out-95 tw-ease-in tw-duration-200": isExiting,
8
      },
9
    )
10
  }
11
/>