Skip to content
API References
rotary

rotary

Briefly

Core style generator function to handle various conditions.

1. Type Definition

interface StyleGeneratorRotary<StyleType extends NestedObject, RotaryVariant> {
    class: (variant: RotaryVariant) => string
    style: (variant: RotaryVariant) => StyleType
 
    compose: (...styles: StyleType[]) => {
        class: (variant: RotaryVariant) => string
        style: (variant: RotaryVariant) => StyleType
    }
}
 
declare const createTools: <StyleType extends NestedObject>() => {
    rotary: <
        VariantsStylesType extends {
            [key in keyof VariantsStylesType]: StyleType
        }
    >({
        base,
        ...styles
    }: { [key_1 in keyof VariantsStylesType]: StyleType } & {
        base?: StyleType
    }) => StyleGeneratorRotary<
        StyleType,
        GetVariantsKey<Exclude<keyof VariantsStylesType, "base">>
    >
}

2. Spec

Usage

tw.rotary({
    base: baseStyle,
    ...rotaryStyles,
})

Parameter: ...rotaryStyles

  • type: Record<string | boolean, Tailwindest>
  • usage: Define rotary styleSheet of variants

Example

Define rotary styleSheet

const button = tw.rotary({
    base: {
        // base button style
        backgroundColor: "bg-white",
    },
    success: {
        // success button style
        backgroundColor: "bg-green-100",
    },
    warning: {
        // warning button style
        backgroundColor: "bg-red-100",
    },
})

Or if you use 'true' 'false' keys, it will be inferred as boolean

const themeBtn = tw.rotary({
    base: {
        // base button style
        backgroundColor: "bg-white",
    },
    true: {
        // true button style
        backgroundColor: "bg-green-100",
    },
    false: {
        // false button style
        backgroundColor: "bg-red-100",
    },
})

3. Returns

class

Briefly

Returns className string

Usage

tw.rotary(...).class(rotaryVariant)

rotaryVariant will be typed as given rotary variant

Example

const warningButton = button.class("warning")
const successButton = button.class("success")
const light = themeBtn.class(true)
const dark = themeBtn.class(false)

style

Briefly

Returns input styleSheet object

Usage

tw.rotary(...).style(rotaryVariant)

Example

const warningButton = button.style("warning")
const successButton = button.style("success")
const light = themeBtn.style(true)
const dark = themeBtn.style(false)

compose

Briefly

Compose all styles into base styleSheet.

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

togglevariants