Padding

Utility	Properties
Failed to load data. Please try again later.

This example sets the padding to 2rem. The element will have uniform padding inside it.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white p-6">6</p>
  </div>
</div>

Padding Bottom

Controls the bottom padding of an element.

Utility	Properties
Failed to load data. Please try again later.

This example sets the bottom padding to 2rem. The element will have space inside it at the bottom.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pb-6">6</p>
  </div>
</div>

Padding Left

Controls the left padding of an element.

Utility	Properties
Failed to load data. Please try again later.

This example sets the left padding to 2rem. The element will have space inside it on the left side.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pl-6">6</p>
  </div>
</div>

Padding Right

Controls the right padding of an element.

Utility	Properties
Failed to load data. Please try again later.

This example sets the right padding to 2rem. The element will have space inside it on the right side.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pr-6">6</p>
  </div>
</div>

Padding Top

Controls the top padding of an element.

Utility	Properties
Failed to load data. Please try again later.

This example sets the top padding to 2rem. The element will have space inside it at the top.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pt-6">6</p>
  </div>
</div>

Padding Block End

Controls the logical block end padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

Utility	Properties
Failed to load data. Please try again later.

This example sets the bottom padding to 2rem. The element will have space inside it at the bottom in a vertical writing mode.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pbe-6">6</p>
  </div>
</div>

Padding Block Start

Controls the logical block start padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

Utility	Properties
Failed to load data. Please try again later.

This example sets the top padding to 2rem. The element will have space inside it at the top in a vertical writing mode.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pbs-6">6</p>
  </div>
</div>

Padding Inline End

Controls the logical inline end padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

Utility	Properties
Failed to load data. Please try again later.

This example sets the right padding to 2rem. The element will have space inside it on the right side in a horizontal writing mode.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pie-6">6</p>
  </div>
</div>

Padding Inline Start

Controls the logical inline start padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

Utility	Properties
Failed to load data. Please try again later.

This example sets the left padding to 2rem. The element will have space inside it on the left side in a horizontal writing mode.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white pis-6">6</p>
  </div>
</div>

Padding X

Controls the left and right paddings of an element at once.

Utility	Properties
Failed to load data. Please try again later.

This example sets the left and right padding to 2rem. The element will have uniform space on both sides inside it.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white px-6">6</p>
  </div>
</div>

Padding Y

Controls the bottom and top paddings of an element at once.

Utility	Properties
Failed to load data. Please try again later.

This example sets the bottom and top to 2rem. The element will have uniform space above and below its content.

6

<div id="area">
  <div class="p-8">
    <p class="bg-indigo tc-white py-6">6</p>
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="p-1 md:p-2 ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="p-1 h:p-2 ..."></div>