Skip to content
API References
variants

variants

Briefly

Core style generator function to handle variants.

1. Type Definition

interface StyleGeneratorVariants<
    StyleType extends NestedObject,
    VariantOption
> {
    class: (variantOption: VariantOption) => string
    style: (variantOption: VariantOption) => StyleType
 
    compose: (...styles: StyleType[]) => {
        class: (variantOption: VariantOption) => string
        style: (variantOption: VariantOption) => StyleType
    }
}
 
declare const createTools: <StyleType extends NestedObject>() => {
    variants: <Variants>({
        base,
        variants,
    }: {
        variants: {
            [VariantsKey in keyof Variants]: Record<
                keyof Variants[VariantsKey],
                StyleType
            >
        }
    } & {
        base?: StyleType
    }) => StyleGeneratorVariants<
        StyleType,
        {
            [VariantsKey_1 in keyof Variants]: GetVariantsKey<
                keyof Variants[VariantsKey_1]
            >
        }
    >
}

2. Spec

Usage

tw.variants({
    base: baseStyle,
    variants: variantsStyles,
})

Parameter: variantsStyles

  • type: Record<string, Record<string, Tailwindest>>
  • usage: Define variants styleSheet of each conditions

Example

Define variant styleSheet

const button = tw.variants({
    base: {
        // base button style
        backgroundColor: "bg-white",
    },
    variants: {
        type: {
            success: {},
            warning: {},
        },
        size: {
            sm: {},
            md: {},
            lg: {},
        },
        light: {
            true: {},
            false: {},
        },
    },
})

3. Returns

class

Briefly

Returns className string

Usage

tw.variants(...).class(variantsOption)

Example

const warningSmLightClass = button.class({
    type: "warning",
    size: "sm",
    light: true,
})
const successLgDarkClass = button.class({
    type: "success",
    size: "lg",
    light: false,
})

style

Briefly

Returns input styleSheet object

Usage

tw.rotary(...).style(variantsOption)

Example

const warningSmLightStyle = button.style({
    type: "warning",
    size: "sm",
    light: true,
})
const successLgDarkStyle = button.style({
    type: "success",
    size: "lg",
    light: false,
})

compose

Briefly

Compose all styles into base styleSheet.

The functionality of compose is same as style's compose.

rotarymergeProps