TWC is not a revolution but…

#react #tailwindcss #javascript #opensource

I'm a true fan of shadcn/ui as it offers out-of-the-box components that are highly customizable. By blending TailwindCSS for styling and theming, along with Radix for accessibility, it provides a smart kick-start for product development.

However, at some point, you will have to create your own React-TypeScript components, which can become complicated, even for coding a simple styled div:

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-xl border bg-card text-card-foreground shadow",
      className
    )}
    {...props}
  />
))

Enter TWC, that dramatically simplifies this with a straightforward syntax:

import { twc } from "react-twc";

const Card = twc.div`rounded-xl border bg-card text-card-foreground shadow`;

Among other features TWC offers some useful helpers like handling conditional classes, cva support and conditional props.

import { twc, TwcComponentProps } from "react-twc";

type ButtonProps = TwcComponentProps<"button"> & { $primary?: boolean };

// Conditional ClassNames
const Button = twc.button<ButtonProps>((props) => [
  "font-semibold border border-blue-500 rounded",
  props.$primary ? "bg-blue-500 text-white" : "bg-white text-gray-800",
]);

import { twc, TwcComponentProps } from "react-twc";

// Adds `target` and `rel` attributes on external links
const Anchor = twc.a.attrs<AnchorProps>((props) =>
  props.$external ? { target: "_blank", rel: "noopener noreferrer" } : {},
)`appearance-none size-4 border-2 border-blue-500 rounded-sm bg-white`;

Integration with Other Libraries

TWC can be used to add TailwindCSS classes on several design systems components including Radix or React Aria.

Takeaway

TWC is not a revolution, but it's a lib crafted by an experienced developer (gregberge), that addresses the frustrations of building React components in modern stacks. For me, it's a ❤️ tool that enhances development experience, and my productivity.