Tailwind Styled Utility inspired by styled-components and emotion

settings.json

// .vscode/settings.json
{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["styled\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
}

styled.ts

import React from 'react';
import { cn } from '@/lib/cn';

export function styled<
  C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>,
>(baseComponent: C, className?: string) {
  const Component = React.forwardRef<
    React.ComponentRef<C>,
    React.ComponentPropsWithRef<C>
  >(({ className: classNameToOverride, ...props }, ref) => {
    return React.createElement(baseComponent, {
      className: cn(className, classNameToOverride),
      ref,
      ...props,
    });
  });

  // Prevent component from showing as `Anonymous` (improves debugging)
  Component.displayName =
    typeof baseComponent === 'string'
      ? baseComponent
      : baseComponent.displayName || 'Styled';

  return Component as unknown as C; // Keep the type of the original component
}