Padding

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

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

Using utility variants

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

Using media queries

Using hover states