@cdoman/tw

Tee Double U

A simple support library for Tailwind CSS. It makes using twMerge slightly more syntactically concise.

Usage

import { tw, is, TW } from "@cdoman/tw";

const otherClasses: string[] = ["other-classname", "color-emerald-500"];

const conditionalClasses: TW = is(disabled, "brightness-75 opacity-50");

const traditionalConditionalClass: string = loading ? "animate-pulse" : "";

const myStyles: TW = tw(
    "border border-solid border-red-500",
    "rounded-md",
    new TW("text-xl"),
    tw("shadow-lg"),
    conditionalClasses,
    traditionalConditionalClass,
    ...otherClassNames
);

const twClassNames = myStyles.tw; // "border border-solid border-red-500 rounded-md..."

Documentation

Classes

TW

A class to manage Tailwind CSS classes.

Functions

tw(classes) ⇒ TW

Creates a new TW instance with the given classes. If passed a TW instance, it will automatically call arg.tw on the object and add the result to the new instance.

is(condition, classes) ⇒

Creates a new TW instance with the given classes if the condition is true, otherwise returns undefined. This is a more concise version of condition ? tw(...classes) : undefined.

tw(classes) ⇒ TW

Creates a new TW instance with the given classes. If passed a TW instance, it will automatically call arg.tw on the object and add the result to the new instance.

Kind: global function
Returns: TW - A new TW instance with the compiled classes.

Param	Type	Description
classes	TWArguments	A list of strings, TW instances, or undefined values.

is(condition, classes) ⇒

Creates a new TW instance with the given classes if the condition is true, otherwise returns undefined. This is a more concise version of condition ? tw(...classes) : undefined.

Kind: global function
Returns: A TW instance with the compiled classes if the condition is true, otherwise undefined.

Param	Type	Description
condition	boolean	The condition to check.
classes	TWArguments	A list of strings, TW instances, or undefined values to be applied.