Skip to Content
Welcome to Twux

Tailwind User Experience

Twux is a simple and powerful way to build re-usable type-safe React components with Tailwind in a 2.5 KB library.

Basic Usage

const Button = twux("text-white bg-blue-500", "button");

Usage:

<Button>
  Click me!
</Button>
// Override a default Tailwind class
<Button className="bg-gray-500">
  Click me!
</Button>

Variants

Twux supports variants of components by providing an object as the second argument.

const VariantButton = twux(
  "text-white p-2 rounded",
  {
    // color variant with two options
    color: {
      primary: "bg-blue-500",
      gray: "bg-gray-500",
    },
    // size variant with three options
    size: {
      sm: "text-sm",
      md: "text-base",
      lg: "text-lg",
    },
  },
  "button"
);

Usage:

<VariantButton color="primary" size="md">
  Medium Primary Button
</VariantButton>
<VariantButton color="gray" size="sm">
  Small Gray Button
</VariantButton>

Twux also supports default values for variants.

Boolean Variants

Twux also supports boolean variants by providing a string value for each variant instead of an object.

const BooleanButton = twux(
  "text-white p-2 rounded bg-blue-500",
  {
    bold: "font-bold",
    italic: "italic",
  },
  "button"
);

Usage:

<BooleanButton bold>
  Bold Button
</BooleanButton>
<BooleanButton italic>
  Italic Button
</BooleanButton>

Note: Boolean variants and option variants can be mixed and matched.

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

Learn More…

Last updated on
Getting Started