Responsive

Responsive Variants

Tailus UI React, built on top of Tailus Themer, incorporates Tailwind Variants. This means you can use responsive variants directly within Tailus UI React.

To use responsive variants, provide an object to the prop. In this object, the key should represent the breakpoint, and the corresponding value should represent the desired prop value at that breakpoint.

// Without responsive variants
<Display as="h1" size="4xl" align="center" weight="bold">
    Build Custom Web UIs
</Display>

// With responsive variants
<Display 
    as="h1"

    size={{
        initial: "4xl",
        sm: "5xl",
        md: "6xl",
        lg: "7xl",
        xl: "8xl",
        xxl: "9xl"
    }}

    align={{
        initial: "left",
        sm: "center",
    }}

    weight={{
        initial: "bold",
        sm: "black",
    }}
>
    Build Custom Web UIs
</Display>

Breackpoints

All the default tailwindcss breakpoints are supported

• initial (default)
• sm (640px)
• md (768px)
• lg (1024px)
• xl (1280px)
• xxl (1536px)