Skip to content
GitHub

GetVariants

Get the variants type from an instance of a tw.rotary or tw.variants styler.

import type { Styler } from "tailwindest"

export type GetVariants<StylerInstance extends Styler<any, any, any>> =
    StylerInstance extends Styler<infer Arg, any, any>
        ? Arg extends never
            ? never
            : Exclude<Parameters<StylerInstance["class"]>[0], "base">
        : never
type InferredVariants = GetVariants<typeof stylerInstance>
  • type: An instance of a tailwindest styler, i.e., the return value of tw.rotary(...) or tw.variants(...).
  • usage: The styler instance from which to extract variant types.
  1. Make a rotary styler:

    const button = tw.rotary({
        variants: {
            default: {},
            warning: {},
            success: {},
        },
    })
  2. Extract the variants type:

    import type { GetVariants } from "tailwindest"
    
    type ButtonVariants = GetVariants<typeof button>
    
    // Result:
    // type ButtonVariants = "default" | "warning" | "success"
  1. Make a variants styler:

    const button = tw.variants({
        variants: {
            type: {
                default: {},
                warning: {},
                success: {},
            },
            size: {
                sm: {},
                md: {},
                lg: {},
            },
        },
    })
  2. Extract the variants type:

    import type { GetVariants } from "tailwindest"
    
    type ButtonVariants = GetVariants<typeof button>
    
    // Result:
    // type ButtonVariants = {
    //     type?: "default" | "warning" | "success";
    //     size?: "sm" | "md" | "lg";
    // }
  3. Use the extracted type for component props:

    interface ButtonProps extends GetVariants<typeof button> {
        children: React.ReactNode
    }
    
    const Button = (props: ButtonProps) => {
        const { children, ...variantOptions } = props
    
        return (
            <button className={button.class(variantOptions)}>
                {props.children}
            </button>
        )
    }