👩‍🎨 TypeTheme ─ Theme based class names styling using Tailwind CSS

ExampleButton.tsx

import clsx from 'clsx';

type Theme<TThemeType extends string> = {
  [TType in TThemeType]: string;
} & {
  default: string;
};

export const getTheme = <TThemeType extends string>(
  theme: TThemeType | 'default' = 'default',
  classes: Theme<TThemeType>
): string => classes[theme];

type MyCustomTheme = 'primary' | 'secondary';

interface ExampleButtonProps {
  theme?: MyCustomTheme;
}

export function ExampleButton({ theme }: ExampleButtonProps) {
  return (
    <div
      className={clsx(
        // Base styles
        'w-full h-8',

        // Get the class names from an optionally defined theme
        getTheme<MyCustomTheme>(theme, {
          primary: 'bg-blue-500 text-white',
          secondary: 'bg-purple-500 text-purple-100',
          default: 'bg-gray-900 text-gray-100',
        })
      )}
    >
      <h1>Hello World</h1>
    </div>
  );
}