Bad example - Here is a good example: https://gist.github.com/RobinMalfait/490a0560a7cfde985d435ad93f8094c5

Badge.tsx

import React, { ReactNode } from "react";
import { classNames } from "../utils/class-names";

type Props = {
  color: string,
  className: string,
  children?: ReactNode
};

export function Badge(props: Props) {
  const { children, color, className } = props;
  return (
    <span
      className={classNames(
        "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 whitespace-no-wrap",
        `bg-${color}-100 text-${color}-800`,
        className
      )}
    >
      {children}
    </span>
  );
}

Badge.defaultProps = {
  color: "gray"
};

usage.tsx

<Badge />
<Badge color="pink" />
<Badge color="pink" className="text-xl" />

why-this-is-bad.md

The good parts (you might think)

1. It looks easy (not a lot of code)
2. It looks maintainable (because it is not too big)
3. It looks extensible (className prop)

The bad parts

1. There is no way you can know what color is passed in beforehand
2. TypeScript won't yell at you if you pass "foobar" to the color, because it is a string.
3. PurgeCSS can't minimize / strip the dynamic css
4. The className introduces hidden/implicit variants/states of your component, this will be a nightmare to refactor later. You change one thing, it doesn't work because in some obscure spot you added a className that overwrote something.

---

Here is a good example: https://gist.github.com/RobinMalfait/490a0560a7cfde985d435ad93f8094c5