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
Rounded corners
The data-rounded attribute accepts the following values:
none
Delete Item
This photo will be deleted from your iCloud Photos.
default
Delete Item
This photo will be deleted from your iCloud Photos.
small
Delete Item
This photo will be deleted from your iCloud Photos.
medium
Delete Item
This photo will be deleted from your iCloud Photos.
large
Delete Item
This photo will be deleted from your iCloud Photos.
xlarge
Delete Item
This photo will be deleted from your iCloud Photos.
2xlarge
Delete Item
This photo will be deleted from your iCloud Photos.
3xlarge
Delete Item
This photo will be deleted from your iCloud Photos.
full
Delete Item
This photo will be deleted from your iCloud Photos.
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.
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.
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.