Skip to content
Recipes
Conditional styling

Conditional styling

Use toggle, rotary, variants functions for easy conditional styling.

  1. toggle: change the style by a boolean condition
  2. rotary: change the style by some conditions
  3. variants: complex combination of categorized conditions

conditional styling design philosophies

Toggle switch - toggle

The toggle function is used to change the style by a single boolean condition. You should define a style for each of the true and false conditions and optionally define a common style for true and false conditions.

Mind concept

conditional styling - toggle

Implementation - toggle

Define themeBtn style, using toggle.

const themeBtn = tw.toggle({
    base: {
        display: "flex",
        alignItems: "items-center",
        justifyContent: "justify-center",
        padding: "p-2",
        "@lg": {
            padding: "lg:p-3",
        },
        borderRadius: "rounded",
        borderWidth: "border",
    },
    truthy: {
        backgroundColor: "bg-black",
        borderColor: "border-white",
        color: "text-white",
    },
    falsy: {
        backgroundColor: "bg-white",
        borderColor: "border-black",
        color: "text-black",
    },
})

Use it in component.

const ThemeBtn = () => {
    const [isDarkMode, setIsDarkMode] = useState(false)
 
    return (
        <button className={themeBtn.class(isDarkMode)}>
            {isDarkMode ? "light" : "dark"}
        </button>
    )
}

Rotary switch - rotary

Mind concept - type

conditional styling - type

Implementation

Define button with type, "default" | "success" | "error" | "pending" variations.

const button = tw.rotary({
    base: {
        // define common style for button type
        display: "flex",
        alignItems: "items-center",
        justifyContent: "justify-center",
 
        padding: "p-2",
        borderWidth: "border",
        borderRadius: "rounded",
 
        color: "text-black",
        "@dark": {
            color: "dark:text-white",
        },
 
        ":hover": {
            opacity: "hover:opacity-90",
        },
        ":active": {
            opacity: "active:opacity-75",
            transformTranslateY: "active:-translate-y-0.5",
        },
    },
    default: {
        borderColor: "border-neutral-100",
        backgroundColor: "bg-white",
    },
    error: {
        borderColor: "border-red-400",
        backgroundColor: "bg-red-400/50",
    },
    pending: {
        borderColor: "border-yellow-400",
        backgroundColor: "bg-yellow-400/50",
    },
    success: {
        borderColor: "border-green-400",
        backgroundColor: "bg-green-400/50",
    },
})

Usage

Use it in component.

💡

Use default parameter (opens in a new tab), to set default variant value

import { type GetVariants } from "tailwindest"
 
const Button = ({
    children,
    onClick,
    type = "default",
}: React.PropsWithChildren<{
    type?: GetVariants<typeof button>
    onClick: () => void
}>) => {
    return (
        <button onClick={onClick} className={button.class(type)}>
            {children}
        </button>
    )
}

Combination of categorized conditions - variants

Mind concept - type & size

conditional styling - total

Implementation

Define complex variants with variants

const button = tw.variants({
    base: {
        display: "flex",
        alignItems: "items-center",
        justifyContent: "justify-center",
    },
 
    variants: {
        type: {
            default: {
                borderColor: "border-neutral-100",
                backgroundColor: "bg-white",
            },
            error: {
                borderColor: "border-red-400",
                backgroundColor: "bg-red-400/50",
            },
            pending: {
                borderColor: "border-yellow-400",
                backgroundColor: "bg-yellow-400/50",
            },
            success: {
                borderColor: "border-green-400",
                backgroundColor: "bg-green-400/50",
            },
        },
        size: {
            sm: {
                fontSize: "text-sm",
                padding: "p-1",
                borderRadius: "rounded-sm",
                borderWidth: "border",
            },
            md: {
                fontSize: "text-base",
                padding: "p-2",
                borderRadius: "rounded",
                borderWidth: "border-[0.2rem]",
            },
            lg: {
                fontSize: "text-lg",
                padding: "p-3",
                borderRadius: "rounded-lg",
                borderWidth: "border-2",
            },
        },
        light: {
            true: {
                color: "text-gray-900",
            },
            false: {
                color: "text-gray-50",
            },
        },
    },
})

Usage

Use it in component.

💡

Use default parameter (opens in a new tab), to set default variant option

import { type GetVariants } from "tailwindest"
 
interface ButtonProps extends GetVariants<typeof button> {
    children: ReactNode
    onClick: () => void
}
 
const Button = ({
    children,
    onClick,
    size = "md",
    type = "default",
    light = false,
}): ButtonProps => {
    return (
        <button
            onClick={onClick}
            className={button({
                type,
                size,
                light,
            })}
        >
            {children}
        </button>
    )
}

Use universal button.

const SomeComponent = () => {
    return (
        <div>
            <Button size="lg" type="success" light onClick={welcome}>
                Succeeded
            </Button>
        </div>
    )
}
Basic stylingCustomize