Themer / theming/rounded

Rounded

Learn how to set and customize the border radius of your theme.

Adjust the border radius of your components using the data-rounded attribute. Start with importing and adding the rounded plugin to your config’s plugins array

import { palettes, rounded, shade } from "@tailus/themer"
theme: {
    extend: {
        colors: palettes.trust,
    }
},
plugins : [
    rounded,
    shade
]
<html data-rounded="xlarge" >

Rounded corners

The data-rounded attribute accepts the following values:

none

 
<html data-rounded="none"" >

default

 
<html data-rounded="default"" >

small

 
<html data-rounded="small"" >

medium

 
<html data-rounded="medium"" >

large

 
<html data-rounded="large"" >

xlarge

 
<html data-rounded="xlarge"" >

2xlarge

 
<html data-rounded="2xlarge"" >

3xlarge

 
<html data-rounded="3xlarge"" >

full

 
<html data-rounded="full"" >

Adding rounded corners to a specific component

You can add the data-rounded attribute to any component to apply a different border radius to that specific component.

 
<html data-rounded="xlarge" >
    <head> </head>
    <body>
        <main>
            <div className="grid grid-cols-4 gap-3">
                <Card>Theme rounded</Card>
                <Card>Theme rounded</Card>
                <Card>Theme rounded</Card>
                <Card data-rounded="3xlarge">3xlarge</Card>
            </div>
        </main>
    </body>
</html>

Customization

You have the flexibility to modify an existing data-rounded or even bypass all the default altogether. This can be achieved by assigning new values to the CSS variables that control border radius.

Customizing a data-rounded

Choose a data-rounded to customize, then define its CSS variables within the @layer base block in your CSS file.

@layer base {
    [data-rounded="xlarge"] {
        --card-radius: theme(borderRadius.xl);
        --feedback-radius: var(--card-radius);
        --accordion-radius: var(--card-radius);
        --menu-radius: var(--card-radius);

        --btn-radius: theme(borderRadius.lg);
        --badge-radius: var(--btn-radius);
        --calendar-radius: var(--btn-radius);
        --tabs-radius: var(--btn-radius);
        --input-radius: var(--btn-radius);

        --avatar-radius: theme(borderRadius.full);
        --annonce-radius: theme(borderRadius.full);
    }
}

Bypass default data-rounded

Remove the rounded plugin in your tailwind.config.ts file. Define the radius CSS variables in your CSS file by assigning them values within the :root selector.

Make sure to place these definitions inside the @layer base block for proper layering.

@layer base {
    :root {
        --card-radius: theme(borderRadius.2xl);
        --feedback-radius: var(--card-radius);
        --accordion-radius: var(--card-radius);
        --menu-radius: var(--card-radius);

        --btn-radius: theme(borderRadius.md);
        --badge-radius: var(--btn-radius);
        --calendar-radius: var(--btn-radius);
        --tabs-radius: var(--btn-radius);
        --input-radius: var(--btn-radius);

        --avatar-radius: theme(borderRadius.full);
        --annonce-radius: theme(borderRadius.full);
    }
}