Skip to content
API References
createTools

createTools

Briefly

Create styling tools with type Tailwindest

1. Type definition

declare const createTools: <StyleType extends NestedObject>() => {
    style: (style: StyleType) => StyleGeneratorStyle<StyleType>
    toggle: (toggleVariants: {
        truthy: StyleType
        falsy: StyleType
        base?: StyleType
    }) => StyleGeneratorToggle<StyleType>
 
    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">>
    >
 
    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]
            >
        }
    >
 
    mergeProps: (baseStyle: StyleType, styleProps: StyleType) => string
}

2. Spec

Usage

createTools<StyleType>()

Generic Parameter: StyleType

  • type: generic StyleType extends NestedObject
  • usage: plug Tailwindest type and create styling tools.

Example

  1. Define customized Tailwindest

    type MyCustom = Tailwindest<{
    color: "my-color-1" | "my-color-2" | "my-color-3"
}>

  2. Plug type at the createTools generic StyleType

    // Name the function what ever you want.
export const tw = createTools<MyCustom>()

  3. Import tw

    💡
    Checkout setup page
    import { tw } from "~/tw"
 
const ex = tw.style({
    color: "text-my-color-1",
    backgroundColor: "bg-my-color-2",
    borderColor: "border-my-color-3",
})
 
const exClass = ex.class
const exStyle = ex.style
UtilityTailwindest