Function Components

Twux can be used with function components by passing a function as the final argument.


import { twux } from "twux";
 
const Chip = twux(
  "text-xs bg-orange-600 text-white rounded-full px-2 py-1 inline-block",
  ({ className, text }: { className: string; text: string }) => {
    return <span className={className}>{text}</span>;
  }
);

Usage:


<Chip text="This is a chip" />

This is a chip

Enhance Existing Function Components

Twux can also be used with existing function component by passing the function as the final argument.


function Label({ className, text }) {
  return <span className={className}>{text}</span>;
}
 
const StyledLabel = twux(
  "text-xs bg-gray-100 px-2 py-1 inline-block rounded",
  Label
);

Usage:


<StyledLabel text="This is a styled label" />

This is a styled label