[thinkxl]

This is how we do it.

We don't use Tailwind directly on your components (unless necessary and for adjustment only, more on this later).

We try to keep Tailwind as an internal implementation detail. The consumer of our components should pass options as `variant="primary"` where `variant: "primary" | "secondary";` BUT it's okay to allow some Tailwind classes for customization on edge cases.

Example (by memory, syntax might be wrong):

  import cn from 'classnames';

  // Definition
  function Button({ fill, isLoading, className }: ButtonProps) {
    return (<button className={cn(
      'relative', 
      'inline-flex',
      'rounded',
      {
        'w-full': fill,
        'opacity-50': isLoading,
      },
      className,
      )}
    >
      {children}
    </button>
  );

  // Usage

  // Full-width button, with some margin on the left
  <Button fill className={"ml-2"} />

  // Regular button, with loading state
  <Button isLoading />

You can even go further and use https://github.com/crswll/clb and create your own rebassjs.