DEV Community

Cover image for TWC is not a revolution but…
Jeremy SFEZ
Jeremy SFEZ

Posted on • Edited on

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 fullscreen mode Exit fullscreen mode

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`;
Enter fullscreen mode Exit fullscreen mode

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", ]);
Enter fullscreen mode Exit fullscreen mode 
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`;
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
gregberge profile image
Greg Bergé •

Thanks! I created TWC to help developers be more productive. I am very happy that it fulfills its mission 🤗