Utilities

Paces Base UI Utilities

Color & Background

Color and background helpers combine text and background styling into a single utility. A suitable contrasting text color is automatically chosen to ensure good readability.

Primary with contrasting color(.bg-primary)

Secondary with contrasting color (.bg-secondary)

Success with contrasting color (.bg-success)

Danger with contrasting color (.bg-danger)

Warning with contrasting color (.bg-warning)

Info with contrasting color (.bg-info)

Light with contrasting color (.bg-light)

Dark with contrasting color (.bg-dark)

Background Opacity

Background color utilities are built using variables, allowing colors to update in real time without recompiling and enabling flexible transparency adjustments.

This is default primary background

This is 75% opacity primary background

This is 50% opacity primary background

This is 25% opacity primary background

This is 10% opacity success background

This is default primary background

This is 75% opacity primary background

This is 50% opacity primary background

This is 25% opacity primary background

This is 10% opacity success background

Text Opacity Color

Text color utilities use variables to support real-time color updates without recompiling, while allowing flexible transparency control.

This is default primary text

This is 75% opacity primary text

This is 50% opacity primary text

This is 25% opacity primary text

Opacity

Opacity controls how transparent an element appears. Higher values make the element more visible, while lower values increase transparency. You can adjust opacity to achieve the desired visual effect.

100%

75%

50%

25%

Border Radius

Add classes to an element to easily round its corners.

Border Radius Size

Adjust the size of rounded corners to make them appear smaller or larger, depending on your design needs.

Border Radius Size

Control how content can be selected when users interact with it, allowing selection to be enabled, disabled, or handled automatically.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Overflow

Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.

This is an example of using .overflow-hidden on an element with set width and height dimensions.

This is an example of using .overflow-visible on an element with set width and height add more text dimensions Paces admin dashboard template.

This is an example of using .overflow-scroll on an element with set width and height dimensions.

Position in Arrange

Easily position elements relative to their container using simple edge-based positioning utilities.

Position in Center

You can also center elements easily by using transform-based positioning for precise alignment.

Position in Axis

Elements can also be centered along only the horizontal or vertical axis for more precise positioning control.

Shadows

Shadows are disabled by default but can be easily added or removed using utility options. Multiple shadow sizes are available to suit different design and layout requirements.

No shadow

Small shadow

Regular shadow

Larger shadow

Height

Height utility classes in Tailwind CSS provide quick control over element height using predefined values such as 25%, 50%, 75%, 100%, and auto. These utilities make it easy to build consistent and responsive layouts.

Height25%

Height50%

Height75%

Height100%

Height auto

Object Fit

Object-fit utilities allow you to control how media elements like images and videos resize within their containers. You can preserve the aspect ratio, fill the container, or stretch the content based on your layout needs.

.object-contain

.object-cover

.object-fill

.object-scale-down

.object-none

Z-index

Use z-index utilities to control the stacking order of elements. These utilities work when an element has a non-static position, such as relative, absolute, or fixed.