These are utility classes used to add padding for any element.


These are the different sizes supported for padding. Note that all calculations are based around 0.5rem or 8px. You can also modify it to use a different base size other than 0.5rem within _config.scss -- see Variants below.


#All Sides

Add padding on all sides of an element using the p-<size> class.

<div class="bg-indigo-100 u-round-xs text-white u-inline-flex p-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">p-4</span></div>

#Both Sides

Add padding to either left and right or top and bottom with the px-<size> and py-<size> classes respectively.

<div class="bg-indigo-100 u-round-xs text-white u-inline-flex px-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">px-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex py-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">py-4</span></div>

#Single Side

For adding padding for only a single side, the class follows a convention like p<l|r|t|b>-<size>.

<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pl-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pl-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pr-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pr-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pt-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pt-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pb-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pb-4</span></div>



The margin classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use p-3-md to apply p-3 on medium screens and above.

<div class="px-1 px-10-sm px-20-md">
    <!-- ... -->

Try out the example below yourself by resizing your browser window.

I grow with the window.

<div class="bg-purple-100 p-2 u-round-xs u-flex u-justify-center u-items-center text-white">
    <p class="bg-purple-300 u-round-xs p-3 px-10-sm px-20-md u-shadow-lg m-0">I grow with the window.</p>

For more information, visit the Viewports documentation.



The classes specified above are the default utility classes for setting paddings. You can add, change, or remove classes within the _config.scss file of Cirrus. The generated values are dependent on the values set for the base-size and steps fields in the config.

Below is an example of what gets generated when the base-size is set to 1rem and we add 64 to the list of steps.

Recall that these configs are merged with the $default-config map.

// _config.scss
$config: (
    extend: (
        sizing-system: (
            base-size: 1rem,
            steps: (64)
) !default;

This would generate the following classes.

:root {
    --space-size: 1rem;
.p-0 {
    padding: calc(var(--space-size) * 0) !important;
/* ... */
.p-64 {
    padding: calc(var(--space-size) * 64) !important;
/* Other viewport variants for padding... */

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.