Spacing Utilities The spacing utilities provide a set of classes to adjust the gap, row-gap, column-gap, padding, padding-top, padding-right, padding-bottom, padding-left, padding-block-start, padding-block, padding-inline-start, padding-inline-end, padding-inline, margin, margin-top, margin-right, margin-bottom, margin-left, margin-block-start, margin-block, margin-inline-start, margin-inline-end and margin-inline properties of elements.
Gap Class Name Property Value .g-autogap auto.g-0gap var(--graupl-spacer-0).g-1gap var(--graupl-spacer-1).g-2gap var(--graupl-spacer-2).g-3gap var(--graupl-spacer-3).g-4gap var(--graupl-spacer-4).g-5gap var(--graupl-spacer-5).g-6gap var(--graupl-spacer-6).g-7gap var(--graupl-spacer-7).g-8gap var(--graupl-spacer-8).g-9gap var(--graupl-spacer-9).g-10gap var(--graupl-spacer-10)
<div class="g-auto"></div>
Gap property Auto 0 1 2 3 4 5 6 7 8 9 10
Row Gap Class Name Property Value .rg-autorow-gap auto.rg-0row-gap var(--graupl-spacer-0).rg-1row-gap var(--graupl-spacer-1).rg-2row-gap var(--graupl-spacer-2).rg-3row-gap var(--graupl-spacer-3).rg-4row-gap var(--graupl-spacer-4).rg-5row-gap var(--graupl-spacer-5).rg-6row-gap var(--graupl-spacer-6).rg-7row-gap var(--graupl-spacer-7).rg-8row-gap var(--graupl-spacer-8).rg-9row-gap var(--graupl-spacer-9).rg-10row-gap var(--graupl-spacer-10)
<div class="rg-auto"></div>
Row gap property Auto 0 1 2 3 4 5 6 7 8 9 10
Column Gap Class Name Property Value .cg-autocolumn-gap auto.cg-0column-gap var(--graupl-spacer-0).cg-1column-gap var(--graupl-spacer-1).cg-2column-gap var(--graupl-spacer-2).cg-3column-gap var(--graupl-spacer-3).cg-4column-gap var(--graupl-spacer-4).cg-5column-gap var(--graupl-spacer-5).cg-6column-gap var(--graupl-spacer-6).cg-7column-gap var(--graupl-spacer-7).cg-8column-gap var(--graupl-spacer-8).cg-9column-gap var(--graupl-spacer-9).cg-10column-gap var(--graupl-spacer-10)
<div class="cg-auto"></div>
Column gap property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Class Name Property Value .p-autopadding auto.p-0padding var(--graupl-spacer-0).p-1padding var(--graupl-spacer-1).p-2padding var(--graupl-spacer-2).p-5padding var(--graupl-spacer-3).p-4padding var(--graupl-spacer-4).p-5padding var(--graupl-spacer-5).p-6padding var(--graupl-spacer-6).p-7padding var(--graupl-spacer-7).p-8padding var(--graupl-spacer-8).p-9padding var(--graupl-spacer-9).p-10padding var(--graupl-spacer-10)
<div class="p-auto"></div>
Padding property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Top Class Name Property Value .pt-autopadding-top auto.pt-0padding-top var(--graupl-spacer-0).pt-1padding-top var(--graupl-spacer-1).pt-2padding-top var(--graupl-spacer-2).pt-3padding-top var(--graupl-spacer-3).pt-4padding-top var(--graupl-spacer-4).pt-5padding-top var(--graupl-spacer-5).pt-6padding-top var(--graupl-spacer-6).pt-7padding-top var(--graupl-spacer-7).pt-8padding-top var(--graupl-spacer-8).pt-9padding-top var(--graupl-spacer-9).pt-10padding-top var(--graupl-spacer-10)
<div class="pt-auto"></div>
Padding top property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Right Class Name Property Value .pr-autopadding-right auto.pr-0padding-right var(--graupl-spacer-0).pr-1padding-right var(--graupl-spacer-1).pr-2padding-right var(--graupl-spacer-2).pr-3padding-right var(--graupl-spacer-3).pr-4padding-right var(--graupl-spacer-4).pr-5padding-right var(--graupl-spacer-5).pr-6padding-right var(--graupl-spacer-6).pr-7padding-right var(--graupl-spacer-7).pr-8padding-right var(--graupl-spacer-8).pr-9padding-right var(--graupl-spacer-9).pr-10padding-right var(--graupl-spacer-10)
<div class="pr-auto"></div>
Padding right property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Bottom Class Name Property Value .pb-autopadding-bottom auto.pb-0padding-bottom var(--graupl-spacer-0).pb-1padding-bottom var(--graupl-spacer-1).pb-2padding-bottom var(--graupl-spacer-2).pb-3padding-bottom var(--graupl-spacer-3).pb-4padding-bottom var(--graupl-spacer-4).pb-5padding-bottom var(--graupl-spacer-5).pb-6padding-bottom var(--graupl-spacer-6).pb-7padding-bottom var(--graupl-spacer-7).pb-8padding-bottom var(--graupl-spacer-8).pb-9padding-bottom var(--graupl-spacer-9).pb-10padding-bottom var(--graupl-spacer-10)
<div class="pb-auto"></div>
Padding bottom property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Left Class Name Property Value .pl-autopadding-left auto.pl-0padding-left var(--graupl-spacer-0).pl-1padding-left var(--graupl-spacer-1).pl-2padding-left var(--graupl-spacer-2).pl-3padding-left var(--graupl-spacer-3).pl-4padding-left var(--graupl-spacer-4).pl-5padding-left var(--graupl-spacer-5).pl-6padding-left var(--graupl-spacer-6).pl-7padding-left var(--graupl-spacer-7).pl-8padding-left var(--graupl-spacer-8).pl-9padding-left var(--graupl-spacer-9).pl-10padding-left var(--graupl-spacer-10)
<div class="pl-auto"></div>
Padding left property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding X Class Name Property Value .px-autopadding-left, padding-right auto.px-0padding-left, padding-right var(--graupl-spacer-0).px-1padding-left, padding-right var(--graupl-spacer-1).px-2padding-left, padding-right var(--graupl-spacer-2).px-3padding-left, padding-right var(--graupl-spacer-3).px-4padding-left, padding-right var(--graupl-spacer-4).px-5padding-left, padding-right var(--graupl-spacer-5).px-6padding-left, padding-right var(--graupl-spacer-6).px-7padding-left, padding-right var(--graupl-spacer-7).px-8padding-left, padding-right var(--graupl-spacer-8).px-9padding-left, padding-right var(--graupl-spacer-9).px-10padding-left, padding-right var(--graupl-spacer-10)
<div class="px-auto"></div>
Padding X property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Y Class Name Property Value .py-autopadding-top, padding-bottom auto.py-0padding-top, padding-bottom var(--graupl-spacer-0).py-1padding-top, padding-bottom var(--graupl-spacer-1).py-2padding-top, padding-bottom var(--graupl-spacer-2).py-3padding-top, padding-bottom var(--graupl-spacer-3).py-4padding-top, padding-bottom var(--graupl-spacer-4).py-5padding-top, padding-bottom var(--graupl-spacer-5).py-6padding-top, padding-bottom var(--graupl-spacer-6).py-7padding-top, padding-bottom var(--graupl-spacer-7).py-8padding-top, padding-bottom var(--graupl-spacer-8).py-9padding-top, padding-bottom var(--graupl-spacer-9).py-10padding-top, padding-bottom var(--graupl-spacer-10)
<div class="py-auto"></div>
Padding Y property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Block Start Class Name Property Value .pbs-autopadding-block-start auto.pbs-0padding-block-start var(--graupl-spacer-0).pbs-1padding-block-start var(--graupl-spacer-1).pbs-2padding-block-start var(--graupl-spacer-2).pbs-3padding-block-start var(--graupl-spacer-3).pbs-4padding-block-start var(--graupl-spacer-4).pbs-5padding-block-start var(--graupl-spacer-5).pbs-6padding-block-start var(--graupl-spacer-6).pbs-7padding-block-start var(--graupl-spacer-7).pbs-8padding-block-start var(--graupl-spacer-8).pbs-9padding-block-start var(--graupl-spacer-9).pbs-10padding-block-start var(--graupl-spacer-10)
<div class="pbs-auto"></div>
Padding block start property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Block End Class Name Property Value .pbe-autopadding-block-end auto.pbe-0padding-block-end var(--graupl-spacer-0).pbe-1padding-block-end var(--graupl-spacer-1).pbe-2padding-block-end var(--graupl-spacer-2).pbe-3padding-block-end var(--graupl-spacer-3).pbe-4padding-block-end var(--graupl-spacer-4).pbe-5padding-block-end var(--graupl-spacer-5).pbe-6padding-block-end var(--graupl-spacer-6).pbe-7padding-block-end var(--graupl-spacer-7).pbe-8padding-block-end var(--graupl-spacer-8).pbe-9padding-block-end var(--graupl-spacer-9).pbe-10padding-block-end var(--graupl-spacer-10)
<div class="pbe-auto"></div>
Padding block end property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Block Class Name Property Value .pbse-autopadding-block auto.pbse-0padding-block var(--graupl-spacer-0).pbse-1padding-block var(--graupl-spacer-1).pbse-2padding-block var(--graupl-spacer-2).pbse-3padding-block var(--graupl-spacer-3).pbse-4padding-block var(--graupl-spacer-4).pbse-5padding-block var(--graupl-spacer-5).pbse-6padding-block var(--graupl-spacer-6).pbse-7padding-block var(--graupl-spacer-7).pbse-8padding-block var(--graupl-spacer-8).pbse-9padding-block var(--graupl-spacer-9).pbse-10padding-block var(--graupl-spacer-10)
<div class="pbse-auto"></div>
Padding block property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Inline Start Class Name Property Value .pis-autopadding-inline-start auto.pis-0padding-inline-start var(--graupl-spacer-0).pis-1padding-inline-start var(--graupl-spacer-1).pis-2padding-inline-start var(--graupl-spacer-2).pis-3padding-inline-start var(--graupl-spacer-3).pis-4padding-inline-start var(--graupl-spacer-4).pis-5padding-inline-start var(--graupl-spacer-5).pis-6padding-inline-start var(--graupl-spacer-6).pis-7padding-inline-start var(--graupl-spacer-7).pis-8padding-inline-start var(--graupl-spacer-8).pis-9padding-inline-start var(--graupl-spacer-9).pis-10padding-inline-start var(--graupl-spacer-10)
<div class="pis-auto"></div>
Padding inline start property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Inline End Class Name Property Value .pie-autopadding-inline-end auto.pie-0padding-inline-end var(--graupl-spacer-0).pie-1padding-inline-end var(--graupl-spacer-1).pie-2padding-inline-end var(--graupl-spacer-2).pie-3padding-inline-end var(--graupl-spacer-3).pie-4padding-inline-end var(--graupl-spacer-4).pie-5padding-inline-end var(--graupl-spacer-5).pie-6padding-inline-end var(--graupl-spacer-6).pie-7padding-inline-end var(--graupl-spacer-7).pie-8padding-inline-end var(--graupl-spacer-8).pie-9padding-inline-end var(--graupl-spacer-9).pie-10padding-inline-end var(--graupl-spacer-10)
<div class="pie-auto"></div>
Padding inline end property Auto 0 1 2 3 4 5 6 7 8 9 10
Padding Inline Class Name Property Value .pise-autopadding-inline auto.pise-0padding-inline var(--graupl-spacer-0).pise-1padding-inline var(--graupl-spacer-1).pise-2padding-inline var(--graupl-spacer-2).pise-3padding-inline var(--graupl-spacer-3).pise-4padding-inline var(--graupl-spacer-4).pise-5padding-inline var(--graupl-spacer-5).pise-6padding-inline var(--graupl-spacer-6).pise-7padding-inline var(--graupl-spacer-7).pise-8padding-inline var(--graupl-spacer-8).pise-9padding-inline var(--graupl-spacer-9).pise-10padding-inline var(--graupl-spacer-10)
<div class="pise-auto"></div>
Padding inline property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Class Name Property Value .m-automargin auto.m-0margin var(--graupl-spacer-0).m-1margin var(--graupl-spacer-1).m-2margin var(--graupl-spacer-2).m-5margin var(--graupl-spacer-3).m-4margin var(--graupl-spacer-4).m-5margin var(--graupl-spacer-5).m-6margin var(--graupl-spacer-6).m-7margin var(--graupl-spacer-7).m-8margin var(--graupl-spacer-8).m-9margin var(--graupl-spacer-9).m-10margin var(--graupl-spacer-10)
<div class="m-auto"></div>
Margin property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Top Class Name Property Value .mt-automargin-top auto.mt-0margin-top var(--graupl-spacer-0).mt-1margin-top var(--graupl-spacer-1).mt-2margin-top var(--graupl-spacer-2).mt-3margin-top var(--graupl-spacer-3).mt-4margin-top var(--graupl-spacer-4).mt-5margin-top var(--graupl-spacer-5).mt-6margin-top var(--graupl-spacer-6).mt-7margin-top var(--graupl-spacer-7).mt-8margin-top var(--graupl-spacer-8).mt-9margin-top var(--graupl-spacer-9).mt-10margin-top var(--graupl-spacer-10)
<div class="mt-auto"></div>
Margin top property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Right Class Name Property Value .mr-automargin-right auto.mr-0margin-right var(--graupl-spacer-0).mr-1margin-right var(--graupl-spacer-1).mr-2margin-right var(--graupl-spacer-2).mr-3margin-right var(--graupl-spacer-3).mr-4margin-right var(--graupl-spacer-4).mr-5margin-right var(--graupl-spacer-5).mr-6margin-right var(--graupl-spacer-6).mr-7margin-right var(--graupl-spacer-7).mr-8margin-right var(--graupl-spacer-8).mr-9margin-right var(--graupl-spacer-9).mr-10margin-right var(--graupl-spacer-10)
<div class="mr-auto"></div>
Margin right property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Bottom Class Name Property Value .mb-automargin-bottom auto.mb-0margin-bottom var(--graupl-spacer-0).mb-1margin-bottom var(--graupl-spacer-1).mb-2margin-bottom var(--graupl-spacer-2).mb-3margin-bottom var(--graupl-spacer-3).mb-4margin-bottom var(--graupl-spacer-4).mb-5margin-bottom var(--graupl-spacer-5).mb-6margin-bottom var(--graupl-spacer-6).mb-7margin-bottom var(--graupl-spacer-7).mb-8margin-bottom var(--graupl-spacer-8).mb-9margin-bottom var(--graupl-spacer-9).mb-10margin-bottom var(--graupl-spacer-10)
<div class="mb-auto"></div>
Margin bottom property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Left Class Name Property Value .ml-automargin-left auto.ml-0margin-left var(--graupl-spacer-0).ml-1margin-left var(--graupl-spacer-1).ml-2margin-left var(--graupl-spacer-2).ml-3margin-left var(--graupl-spacer-3).ml-4margin-left var(--graupl-spacer-4).ml-5margin-left var(--graupl-spacer-5).ml-6margin-left var(--graupl-spacer-6).ml-7margin-left var(--graupl-spacer-7).ml-8margin-left var(--graupl-spacer-8).ml-9margin-left var(--graupl-spacer-9).ml-10margin-left var(--graupl-spacer-10)
<div class="ml-auto"></div>
Margin left property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin X Class Name Property Value .mx-automargin-left, margin-right auto.mx-0margin-left, margin-right var(--graupl-spacer-0).mx-1margin-left, margin-right var(--graupl-spacer-1).mx-2margin-left, margin-right var(--graupl-spacer-2).mx-3margin-left, margin-right var(--graupl-spacer-3).mx-4margin-left, margin-right var(--graupl-spacer-4).mx-5margin-left, margin-right var(--graupl-spacer-5).mx-6margin-left, margin-right var(--graupl-spacer-6).mx-7margin-left, margin-right var(--graupl-spacer-7).mx-8margin-left, margin-right var(--graupl-spacer-8).mx-9margin-left, margin-right var(--graupl-spacer-9).mx-10margin-left, margin-right var(--graupl-spacer-10)
<div class="mx-auto"></div>
Margin X property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Y Class Name Property Value .my-automargin-top, margin-bottom auto.my-0margin-top, margin-bottom var(--graupl-spacer-0).my-1margin-top, margin-bottom var(--graupl-spacer-1).my-2margin-top, margin-bottom var(--graupl-spacer-2).my-3margin-top, margin-bottom var(--graupl-spacer-3).my-4margin-top, margin-bottom var(--graupl-spacer-4).my-5margin-top, margin-bottom var(--graupl-spacer-5).my-6margin-top, margin-bottom var(--graupl-spacer-6).my-7margin-top, margin-bottom var(--graupl-spacer-7).my-8margin-top, margin-bottom var(--graupl-spacer-8).my-9margin-top, margin-bottom var(--graupl-spacer-9).my-10margin-top, margin-bottom var(--graupl-spacer-10)
<div class="my-auto"></div>
Margin Y property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Block Start Class Name Property Value .mbs-automargin-block-start auto.mbs-0margin-block-start var(--graupl-spacer-0).mbs-1margin-block-start var(--graupl-spacer-1).mbs-2margin-block-start var(--graupl-spacer-2).mbs-3margin-block-start var(--graupl-spacer-3).mbs-4margin-block-start var(--graupl-spacer-4).mbs-5margin-block-start var(--graupl-spacer-5).mbs-6margin-block-start var(--graupl-spacer-6).mbs-7margin-block-start var(--graupl-spacer-7).mbs-8margin-block-start var(--graupl-spacer-8).mbs-9margin-block-start var(--graupl-spacer-9).mbs-10margin-block-start var(--graupl-spacer-10)
<div class="mbs-auto"></div>
Margin block start property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Block End Class Name Property Value .mbe-automargin-block-end auto.mbe-0margin-block-end var(--graupl-spacer-0).mbe-1margin-block-end var(--graupl-spacer-1).mbe-2margin-block-end var(--graupl-spacer-2).mbe-3margin-block-end var(--graupl-spacer-3).mbe-4margin-block-end var(--graupl-spacer-4).mbe-5margin-block-end var(--graupl-spacer-5).mbe-6margin-block-end var(--graupl-spacer-6).mbe-7margin-block-end var(--graupl-spacer-7).mbe-8margin-block-end var(--graupl-spacer-8).mbe-9margin-block-end var(--graupl-spacer-9).mbe-10margin-block-end var(--graupl-spacer-10)
<div class="mbe-auto"></div>
Margin block end property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Block Class Name Property Value .mbse-automargin-block auto.mbse-0margin-block var(--graupl-spacer-0).mbse-1margin-block var(--graupl-spacer-1).mbse-2margin-block var(--graupl-spacer-2).mbse-3margin-block var(--graupl-spacer-3).mbse-4margin-block var(--graupl-spacer-4).mbse-5margin-block var(--graupl-spacer-5).mbse-6margin-block var(--graupl-spacer-6).mbse-7margin-block var(--graupl-spacer-7).mbse-8margin-block var(--graupl-spacer-8).mbse-9margin-block var(--graupl-spacer-9).mbse-10margin-block var(--graupl-spacer-10)
<div class="mbse-auto"></div>
Margin block property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Inline Start Class Name Property Value .mis-automargin-inline-start auto.mis-0margin-inline-start var(--graupl-spacer-0).mis-1margin-inline-start var(--graupl-spacer-1).mis-2margin-inline-start var(--graupl-spacer-2).mis-3margin-inline-start var(--graupl-spacer-3).mis-4margin-inline-start var(--graupl-spacer-4).mis-5margin-inline-start var(--graupl-spacer-5).mis-6margin-inline-start var(--graupl-spacer-6).mis-7margin-inline-start var(--graupl-spacer-7).mis-8margin-inline-start var(--graupl-spacer-8).mis-9margin-inline-start var(--graupl-spacer-9).mis-10margin-inline-start var(--graupl-spacer-10)
<div class="mis-auto"></div>
Margin inline start property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Inline End Class Name Property Value .mie-automargin-inline-end auto.mie-0margin-inline-end var(--graupl-spacer-0).mie-1margin-inline-end var(--graupl-spacer-1).mie-2margin-inline-end var(--graupl-spacer-2).mie-3margin-inline-end var(--graupl-spacer-3).mie-4margin-inline-end var(--graupl-spacer-4).mie-5margin-inline-end var(--graupl-spacer-5).mie-6margin-inline-end var(--graupl-spacer-6).mie-7margin-inline-end var(--graupl-spacer-7).mie-8margin-inline-end var(--graupl-spacer-8).mie-9margin-inline-end var(--graupl-spacer-9).mie-10margin-inline-end var(--graupl-spacer-10)
<div class="mie-auto"></div>
Margin inline end property Auto 0 1 2 3 4 5 6 7 8 9 10
Margin Inline Class Name Property Value .mise-automargin-inline auto.mise-0margin-inline var(--graupl-spacer-0).mise-1margin-inline var(--graupl-spacer-1).mise-2margin-inline var(--graupl-spacer-2).mise-3margin-inline var(--graupl-spacer-3).mise-4margin-inline var(--graupl-spacer-4).mise-5margin-inline var(--graupl-spacer-5).mise-6margin-inline var(--graupl-spacer-6).mise-7margin-inline var(--graupl-spacer-7).mise-8margin-inline var(--graupl-spacer-8).mise-9margin-inline var(--graupl-spacer-9).mise-10margin-inline var(--graupl-spacer-10)
<div class="mise-auto"></div>
Margin inline property Auto 0 1 2 3 4 5 6 7 8 9 10
Customization To customize the alignment utilities, you can use the following variables.
Variable Description Default Value $selector-baseBase selector for utility classes. "."$selector-prefixThe selector prefix for all utility classes. ""$selector-suffixThe selctor suffix for all utility classes. ""$selector-separatorThe selector separator for all utility classes. ""$use-importantAppends !important to generated utility declarations. true$generate-base-utilitiesGenerates the base utility classes. true$screen-awareEnables screen-aware utility variants. false$theme-awareEnables theme-aware utility variants. false$scheme-awareEnables scheme-aware utility variants. false$state-awareEnables state-aware utility variants. false$container-awareEnables container-aware utility variants. false$screen-aware-selector-prefixPrefix to the screen-aware portion of utility selectors. ""$screen-aware-selector-suffixSuffix to the screen-aware portion of utility selectors. ""$screen-aware-selector-separatorSeparator inserted for screen-aware utility selectors. "\\:"$theme-aware-selector-prefixPrefix to the theme-aware portion of utility selectors. ""$theme-aware-selector-suffixSuffix to the theme-aware portion of utility selectors. "-theme"$theme-aware-selector-separatorSeparator inserted for theme-aware utility selectors. "\\:"$scheme-aware-selector-prefixPrefix to the scheme-aware portion of utility selectors. ""$scheme-aware-selector-suffixSuffix to the scheme-aware portion of utility selectors. "-mode"$scheme-aware-selector-separatorSeparator inserted for scheme-aware utility selectors. "\\:"$state-aware-selector-prefixPrefix to the state-aware portion of utility selectors. ""$state-aware-selector-suffixSuffix to the state-aware portion of utility selectors. ""$state-aware-selector-separatorSeparator inserted for state-aware utility selectors. "\\:"$container-aware-selector-prefixPrefix to the container-aware portion of utility selectors. "cq\\:"$container-aware-selector-suffixSuffix to the container-aware portion of utility selectors. ""$container-aware-selector-separatorSeparator inserted for container-aware utility selectors. "\\:"$utility-propertiesMap of utility properties. ()$utility-valuesMap of utility values. ()$utility-mapMap of utility property/value pairs. ()
Responsive Variants Generating responsive utility classes can be done by setting $screen-aware, $theme-aware, $scheme-aware, $state-aware, or $container-aware to true.
By default, screen-aware responsive utility classes are generated for spacing.
