Comparing EmotionCSS to TailwindCSS

Comparison.tsx

// Emotion
const Label = styled.div<Pick<BreadcrumbProps, "isActive">>(
  ({ theme, isActive }) => [
    {
      ...theme.typography.DetailLargeM,
      ...theme.typography.noWrap,
      color: theme.colors.contentTertiary,
    },
    isActive && {
      color: theme.colors.contentPrimary,
      "&:hover": {
        textDecoration: "underline",
      },
    },
  ],
);

export const Breadcrumb: React.VFC<BreadcrumbProps> = ({
  label,
  isActive,
}) => {
  return (
    <Label isActive={isActive}>
      {label}
    </Label>
  );
};

// ---

// Tailwind
function Label({ isActive, children }) {
  return (
    <div
      className={clsx(
        "text-detail-large-m whitespace-nowrap text-content-tertiary",
        isActive && "text-content-primary hover:underline",
      )}
    >
      {children}
    </div>
  );
}

export const Breadcrumb: React.VFC<BreadcrumbProps> = ({
  label,
  isActive,
}) => {
  return (
    <Label isActive={isActive}>
      {label}
    </Label>
  );
};

A nice thing here is that you don't have to import anything like styled. We are importing clsx however for the conditional formatting.