Changelog

Utilities

Frequently used utilities for customizing Hummingbird.

Padding

Utilities for controlling the padding of an element.

ClassStyles
p-<number>
padding: calc(var(--spacing) * <number>);
p-px
padding: 1px;
p-(<custom-property>)
padding: var(<custom-property>);
p-[<value>]
padding: <value>;
px-<number>
padding-inline: calc(var(--spacing) * <number>);
px-px
padding-inline: 1px;
px-(<custom-property>)
padding-inline: var(<custom-property>);
px-[<value>]
padding-inline: <value>;
py-<number>
padding-block: calc(var(--spacing) * <number>);
py-px
padding-block: 1px;
py-(<custom-property>)
padding-block: var(<custom-property>);
py-[<value>]
padding-block: <value>;
ps-<number>
padding-inline-start: calc(var(--spacing) * <number>);
ps-px
padding-inline-start: 1px;
ps-(<custom-property>)
padding-inline-start: var(<custom-property>);
ps-[<value>]
padding-inline-start: <value>;
pe-<number>
padding-inline-end: calc(var(--spacing) * <number>);
pe-px
padding-inline-end: 1px;
pe-(<custom-property>)
padding-inline-end: var(<custom-property>);
pe-[<value>]
padding-inline-end: <value>;
pbs-<number>
padding-block-start: calc(var(--spacing) * <number>);
pbs-px
padding-block-start: 1px;
pbs-(<custom-property>)
padding-block-start: var(<custom-property>);
pbs-[<value>]
padding-block-start: <value>;
pbe-<number>
padding-block-end: calc(var(--spacing) * <number>);
pbe-px
padding-block-end: 1px;
pbe-(<custom-property>)
padding-block-end: var(<custom-property>);
pbe-[<value>]
padding-block-end: <value>;
pt-<number>
padding-top: calc(var(--spacing) * <number>);
pt-px
padding-top: 1px;
pt-(<custom-property>)
padding-top: var(<custom-property>);
pt-[<value>]
padding-top: <value>;
pr-<number>
padding-right: calc(var(--spacing) * <number>);
pr-px
padding-right: 1px;
pr-(<custom-property>)
padding-right: var(<custom-property>);
pr-[<value>]
padding-right: <value>;
pb-<number>
padding-bottom: calc(var(--spacing) * <number>);
pb-px
padding-bottom: 1px;
pb-(<custom-property>)
padding-bottom: var(<custom-property>);
pb-[<value>]
padding-bottom: <value>;
pl-<number>
padding-left: calc(var(--spacing) * <number>);
pl-px
padding-left: 1px;
pl-(<custom-property>)
padding-left: var(<custom-property>);
pl-[<value>]
padding-left: <value>;

Margin

Utilities for controlling the margin of an element.

ClassStyles
m-<number>
margin: calc(var(--spacing) * <number>);
-m-<number>
margin: calc(var(--spacing) * -<number>);
m-auto
margin: auto;
m-px
margin: 1px;
-m-px
margin: -1px;
m-(<custom-property>)
margin: var(<custom-property>);
m-[<value>]
margin: <value>;
mx-<number>
margin-inline: calc(var(--spacing) * <number>);
-mx-<number>
margin-inline: calc(var(--spacing) * -<number>);
mx-auto
margin-inline: auto;
mx-px
margin-inline: 1px;
-mx-px
margin-inline: -1px;
mx-(<custom-property>)
margin-inline: var(<custom-property>);
mx-[<value>]
margin-inline: <value>;
my-<number>
margin-block: calc(var(--spacing) * <number>);
-my-<number>
margin-block: calc(var(--spacing) * -<number>);
my-auto
margin-block: auto;
my-px
margin-block: 1px;
-my-px
margin-block: -1px;
my-(<custom-property>)
margin-block: var(<custom-property>);
my-[<value>]
margin-block: <value>;
ms-<number>
margin-inline-start: calc(var(--spacing) * <number>);
-ms-<number>
margin-inline-start: calc(var(--spacing) * -<number>);
ms-auto
margin-inline-start: auto;
ms-px
margin-inline-start: 1px;
-ms-px
margin-inline-start: -1px;
ms-(<custom-property>)
margin-inline-start: var(<custom-property>);
ms-[<value>]
margin-inline-start: <value>;
me-<number>
margin-inline-end: calc(var(--spacing) * <number>);
-me-<number>
margin-inline-end: calc(var(--spacing) * -<number>);
me-auto
margin-inline-end: auto;
me-px
margin-inline-end: 1px;
-me-px
margin-inline-end: -1px;
me-(<custom-property>)
margin-inline-end: var(<custom-property>);
me-[<value>]
margin-inline-end: <value>;
mbs-<number>
margin-block-start: calc(var(--spacing) * <number>);
-mbs-<number>
margin-block-start: calc(var(--spacing) * -<number>);
mbs-auto
margin-block-start: auto;
mbs-px
margin-block-start: 1px;
-mbs-px
margin-block-start: -1px;
mbs-(<custom-property>)
margin-block-start: var(<custom-property>);
mbs-[<value>]
margin-block-start: <value>;
mbe-<number>
margin-block-end: calc(var(--spacing) * <number>);
-mbe-<number>
margin-block-end: calc(var(--spacing) * -<number>);
mbe-auto
margin-block-end: auto;
mbe-px
margin-block-end: 1px;
-mbe-px
margin-block-end: -1px;
mbe-(<custom-property>)
margin-block-end: var(<custom-property>);
mbe-[<value>]
margin-block-end: <value>;
mt-<number>
margin-top: calc(var(--spacing) * <number>);
-mt-<number>
margin-top: calc(var(--spacing) * -<number>);
mt-auto
margin-top: auto;
mt-px
margin-top: 1px;
-mt-px
margin-top: -1px;
mt-(<custom-property>)
margin-top: var(<custom-property>);
mt-[<value>]
margin-top: <value>;
mr-<number>
margin-right: calc(var(--spacing) * <number>);
-mr-<number>
margin-right: calc(var(--spacing) * -<number>);
mr-auto
margin-right: auto;
mr-px
margin-right: 1px;
-mr-px
margin-right: -1px;
mr-(<custom-property>)
margin-right: var(<custom-property>);
mr-[<value>]
margin-right: <value>;
mb-<number>
margin-bottom: calc(var(--spacing) * <number>);
-mb-<number>
margin-bottom: calc(var(--spacing) * -<number>);
mb-auto
margin-bottom: auto;
mb-px
margin-bottom: 1px;
-mb-px
margin-bottom: -1px;
mb-(<custom-property>)
margin-bottom: var(<custom-property>);
mb-[<value>]
margin-bottom: <value>;
ml-<number>
margin-left: calc(var(--spacing) * <number>);
-ml-<number>
margin-left: calc(var(--spacing) * -<number>);
ml-auto
margin-left: auto;
ml-px
margin-left: 1px;
-ml-px
margin-left: -1px;
ml-(<custom-property>)
margin-left: var(<custom-property>);
ml-[<value>]
margin-left: <value>;
space-x-<number>
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-x-reverse)));
};
-space-x-<number>
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * -<number>) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-space-x-reverse)));
};
space-x-px
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(1px * var(--tw-space-x-reverse));
  margin-inline-end: calc(1px * calc(1 - var(--tw-space-x-reverse)));
};
-space-x-px
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
  margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
};
space-x-(<custom-property>)
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(var(<custom-property>) * var(--tw-space-x-reverse));
  margin-inline-end: calc(var(<custom-property>) * calc(1 - var(--tw-space-x-reverse)));
};
space-x-[<value>]
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(<value> * var(--tw-space-x-reverse));
  margin-inline-end: calc(<value> * calc(1 - var(--tw-space-x-reverse)));
};
space-y-<number>
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-y-reverse)));
};
-space-y-<number>
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * -<number>) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-space-y-reverse)));
};
space-y-px
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(1px * var(--tw-space-y-reverse));
  margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
};
-space-y-px
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(-1px * var(--tw-space-y-reverse));
  margin-block-end: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
};
space-y-(<custom-property>)
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(var(<custom-property>) * var(--tw-space-y-reverse));
  margin-block-end: calc(var(<custom-property>) * calc(1 - var(--tw-space-y-reverse)));
};
space-y-[<value>]
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(<value> * var(--tw-space-y-reverse));
  margin-block-end: calc(<value> * calc(1 - var(--tw-space-y-reverse)));
};
space-x-reverse
& > :not(:last-child)) {
  --tw-space-x-reverse: 1;
}
space-y-reverse
& > :not(:last-child)) {
  --tw-space-y-reverse: 1;
}

Font Family

Utilities for controlling the font family of an element.

ClassStyles
font-sans
font-family: var(--font-sans); /* 'Figtree', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */
font-serif
font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */
font-mono
font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */
font-(family-name:<custom-property>)
font-family: var(<custom-property>);
font-[<value>]
font-family: <value>;

Font Size

Utilities for controlling the font size of an element.

ClassStyles
text-xs
font-size: var(--text-xs); /* 0.75rem (12px) */ 
line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */
text-sm
font-size: var(--text-sm); /* 0.875rem (14px) */ 
line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */
text-base
font-size: var(--text-base); /* 1rem (16px) */ 
line-height: var(--text-base--line-height); /* calc(1.5 / 1) */
text-lg
font-size: var(--text-lg); /* 1.125rem (18px) */ 
line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */
text-xl
font-size: var(--text-xl); /* 1.25rem (20px) */ 
line-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */
text-2xl
font-size: var(--text-2xl); /* 1.5rem (24px) */ 
line-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */
text-3xl
font-size: var(--text-3xl); /* 1.875rem (30px) */ 
line-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */
text-4xl
font-size: var(--text-4xl); /* 2.25rem (36px) */ 
line-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */
text-5xl
font-size: var(--text-5xl); /* 3rem (48px) */ 
line-height: var(--text-5xl--line-height); /* 1 */
text-6xl
font-size: var(--text-6xl); /* 3.75rem (60px) */ 
line-height: var(--text-6xl--line-height); /* 1 */
text-7xl
font-size: var(--text-7xl); /* 4.5rem (72px) */ 
line-height: var(--text-7xl--line-height); /* 1 */
text-8xl
font-size: var(--text-8xl); /* 6rem (96px) */ 
line-height: var(--text-8xl--line-height); /* 1 */
text-9xl
font-size: var(--text-9xl); /* 8rem (128px) */ 
line-height: var(--text-9xl--line-height); /* 1 */
text-(length:<custom-property>)
font-size: var(<custom-property>);
text-[<value>]
font-size: <value>;

Font Weight

Utilities for controlling the font weight of an element.

ClassStyles
font-thin
font-weight: 100;
font-extralight
font-weight: 200;
font-light
font-weight: 300;
font-normal
font-weight: 400;
font-medium
font-weight: 500;
font-semibold
font-weight: 600;
font-bold
font-weight: 700;
font-extrabold
font-weight: 800;
font-black
font-weight: 900;
font-(<custom-property>)
font-weight: var(<custom-property>);
font-[<value>]
font-weight: <value>;

Line Height

Utilities for controlling the line height of an element.

ClassStyles
text-<size>/<number>
font-size: <size>;
line-height: calc(var(--spacing) * <number>);
text-<size>/(<custom-property>)
font-size: <size>;
line-height: var(<custom-property>);
text-<size>/[<value>]
font-size: <size>;
line-height: <value>;
leading-none
line-height: 1;
leading-<number>
line-height: calc(var(--spacing) * <number>);
leading-(<custom-property>)
line-height: var(<custom-property>);
leading-[<value>]
line-height: <value>;

Border Radius

Utilities for controlling the border radius of an element.

ClassStyles
rounded-xs
border-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-sm
border-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-md
border-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-lg
border-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-xl
border-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-2xl
border-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-3xl
border-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-4xl
border-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-none
border-radius: 0;
rounded-full
border-radius: calc(infinity * 1px);
rounded-(<custom-property>)
border-radius: var(<custom-property>);
rounded-[<value>]
border-radius: <value>;
rounded-s-xs
border-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */
border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-s-sm
border-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */
border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-s-md
border-start-start-radius: var(--radius-md); /* 0.375rem (6px) */
border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-s-lg
border-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */
border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-s-xl
border-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */
border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-s-2xl
border-start-start-radius: var(--radius-2xl); /* 1rem (16px) */
border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-s-3xl
border-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-s-4xl
border-start-start-radius: var(--radius-4xl); /* 2rem (32px) */
border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-s-none
border-start-start-radius: 0;
border-end-start-radius: 0;
rounded-s-full
border-start-start-radius: calc(infinity * 1px);
border-end-start-radius: calc(infinity * 1px);
rounded-s-(<custom-property>)
border-start-start-radius: var(<custom-property>);
border-end-start-radius: var(<custom-property>);
rounded-s-[<value>]
border-start-start-radius: <value>;
border-end-start-radius: <value>;
rounded-e-xs
border-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */
border-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-e-sm
border-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */
border-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-e-md
border-start-end-radius: var(--radius-md); /* 0.375rem (6px) */
border-end-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-e-lg
border-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */
border-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-e-xl
border-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */
border-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-e-2xl
border-start-end-radius: var(--radius-2xl); /* 1rem (16px) */
border-end-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-e-3xl
border-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-e-4xl
border-start-end-radius: var(--radius-4xl); /* 2rem (32px) */
border-end-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-e-none
border-start-end-radius: 0;
border-end-end-radius: 0;
rounded-e-full
border-start-end-radius: calc(infinity * 1px);
border-end-end-radius: calc(infinity * 1px);
rounded-e-(<custom-property>)
border-start-end-radius: var(<custom-property>);
border-end-end-radius: var(<custom-property>);
rounded-e-[<value>]
border-start-end-radius: <value>;
border-end-end-radius: <value>;
rounded-t-xs
border-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */
border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-t-sm
border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */
border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-t-md
border-top-left-radius: var(--radius-md); /* 0.375rem (6px) */
border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-t-lg
border-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */
border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-t-xl
border-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */
border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-t-2xl
border-top-left-radius: var(--radius-2xl); /* 1rem (16px) */
border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-t-3xl
border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-t-4xl
border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */
border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-t-none
border-top-left-radius: 0;
border-top-right-radius: 0;
rounded-t-full
border-top-left-radius: calc(infinity * 1px);
border-top-right-radius: calc(infinity * 1px);
rounded-t-(<custom-property>)
border-top-left-radius: var(<custom-property>);
border-top-right-radius: var(<custom-property>);
rounded-t-[<value>]
border-top-left-radius: <value>;
border-top-right-radius: <value>;
rounded-r-xs
border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */
border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-r-sm
border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */
border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-r-md
border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */
border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-r-lg
border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */
border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-r-xl
border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */
border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-r-2xl
border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */
border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-r-3xl
border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-r-4xl
border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */
border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-r-none
border-top-right-radius: 0;
border-bottom-right-radius: 0;
rounded-r-full
border-top-right-radius: calc(infinity * 1px);
border-bottom-right-radius: calc(infinity * 1px);
rounded-r-(<custom-property>)
border-top-right-radius: var(<custom-property>);
border-bottom-right-radius: var(<custom-property>);
rounded-r-[<value>]
border-top-right-radius: <value>;
border-bottom-right-radius: <value>;
rounded-b-xs
border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */
border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-b-sm
border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */
border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-b-md
border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */
border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-b-lg
border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */
border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-b-xl
border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */
border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-b-2xl
border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */
border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-b-3xl
border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-b-4xl
border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */
border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-b-none
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
rounded-b-full
border-bottom-right-radius: calc(infinity * 1px);
border-bottom-left-radius: calc(infinity * 1px);
rounded-b-(<custom-property>)
border-bottom-right-radius: var(<custom-property>);
border-bottom-left-radius: var(<custom-property>);
rounded-b-[<value>]
border-bottom-right-radius: <value>;
border-bottom-left-radius: <value>;
rounded-l-xs
border-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */
border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-l-sm
border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */
border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-l-md
border-top-left-radius: var(--radius-md); /* 0.375rem (6px) */
border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-l-lg
border-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */
border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-l-xl
border-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */
border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-l-2xl
border-top-left-radius: var(--radius-2xl); /* 1rem (16px) */
border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-l-3xl
border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-l-4xl
border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */
border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-l-none
border-top-left-radius: 0;
border-bottom-left-radius: 0;
rounded-l-full
border-top-left-radius: calc(infinity * 1px);
border-bottom-left-radius: calc(infinity * 1px);
rounded-l-(<custom-property>)
border-top-left-radius: var(<custom-property>);
border-bottom-left-radius: var(<custom-property>);
rounded-l-[<value>]
border-top-left-radius: <value>;
border-bottom-left-radius: <value>;
rounded-ss-xs
border-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-ss-sm
border-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-ss-md
border-start-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-ss-lg
border-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-ss-xl
border-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-ss-2xl
border-start-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-ss-3xl
border-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-ss-4xl
border-start-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-ss-none
border-start-start-radius: 0;
rounded-ss-full
border-start-start-radius: calc(infinity * 1px);
rounded-ss-(<custom-property>)
border-start-start-radius: var(<custom-property>);
rounded-ss-[<value>]
border-start-start-radius: <value>;
rounded-se-xs
border-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-se-sm
border-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-se-md
border-start-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-se-lg
border-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-se-xl
border-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-se-2xl
border-start-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-se-3xl
border-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-se-4xl
border-start-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-se-none
border-start-end-radius: 0;
rounded-se-full
border-start-end-radius: calc(infinity * 1px);
rounded-se-(<custom-property>)
border-start-end-radius: var(<custom-property>);
rounded-se-[<value>]
border-start-end-radius: <value>;
rounded-ee-xs
border-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-ee-sm
border-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-ee-md
border-end-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-ee-lg
border-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-ee-xl
border-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-ee-2xl
border-end-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-ee-3xl
border-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-ee-4xl
border-end-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-ee-none
border-end-end-radius: 0;
rounded-ee-full
border-end-end-radius: calc(infinity * 1px);
rounded-ee-(<custom-property>)
border-end-end-radius: var(<custom-property>);
rounded-ee-[<value>]
border-end-end-radius: <value>;
rounded-es-xs
border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-es-sm
border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-es-md
border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-es-lg
border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-es-xl
border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-es-2xl
border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-es-3xl
border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-es-4xl
border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-es-none
border-end-start-radius: 0;
rounded-es-full
border-end-start-radius: calc(infinity * 1px);
rounded-es-(<custom-property>)
border-end-start-radius: var(<custom-property>);
rounded-es-[<value>]
border-end-start-radius: <value>;
rounded-tl-xs
border-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-tl-sm
border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-tl-md
border-top-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-tl-lg
border-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-tl-xl
border-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-tl-2xl
border-top-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-tl-3xl
border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-tl-4xl
border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-tl-none
border-top-left-radius: 0;
rounded-tl-full
border-top-left-radius: calc(infinity * 1px);
rounded-tl-(<custom-property>)
border-top-left-radius: var(<custom-property>);
rounded-tl-[<value>]
border-top-left-radius: <value>;
rounded-tr-xs
border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-tr-sm
border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-tr-md
border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-tr-lg
border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-tr-xl
border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-tr-2xl
border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-tr-3xl
border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-tr-4xl
border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-tr-none
border-top-right-radius: 0;
rounded-tr-full
border-top-right-radius: calc(infinity * 1px);
rounded-tr-(<custom-property>)
border-top-right-radius: var(<custom-property>);
rounded-tr-[<value>]
border-top-right-radius: <value>;
rounded-br-xs
border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-br-sm
border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-br-md
border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-br-lg
border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-br-xl
border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-br-2xl
border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-br-3xl
border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-br-4xl
border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-br-none
border-bottom-right-radius: 0;
rounded-br-full
border-bottom-right-radius: calc(infinity * 1px);
rounded-br-(<custom-property>)
border-bottom-right-radius: var(<custom-property>);
rounded-br-[<value>]
border-bottom-right-radius: <value>;
rounded-bl-xs
border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-bl-sm
border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-bl-md
border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-bl-lg
border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-bl-xl
border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-bl-2xl
border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-bl-3xl
border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-bl-4xl
border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-bl-none
border-bottom-left-radius: 0;
rounded-bl-full
border-bottom-left-radius: calc(infinity * 1px);
rounded-bl-(<custom-property>)
border-bottom-left-radius: var(<custom-property>);
rounded-bl-[<value>]
border-bottom-left-radius: <value>;
Previous

Reboot

Next

Container