パディング

要素のパディングを制御するためのユーティリティ。

Class reference

Class
Properties
.p-0padding: 0;
.p-1padding: 0.25rem;
.p-2padding: 0.5rem;
.p-3padding: 0.75rem;
.p-4padding: 1rem;
.p-5padding: 1.25rem;
.p-6padding: 1.5rem;
.p-8padding: 2rem;
.p-10padding: 2.5rem;
.p-12padding: 3rem;
.p-16padding: 4rem;
.p-20padding: 5rem;
.p-24padding: 6rem;
.p-32padding: 8rem;
.p-40padding: 10rem;
.p-48padding: 12rem;
.p-56padding: 14rem;
.p-64padding: 16rem;
.p-pxpadding: 1px;
.py-0padding-top: 0; padding-bottom: 0;
.px-0padding-left: 0; padding-right: 0;
.py-1padding-top: 0.25rem; padding-bottom: 0.25rem;
.px-1padding-left: 0.25rem; padding-right: 0.25rem;
.py-2padding-top: 0.5rem; padding-bottom: 0.5rem;
.px-2padding-left: 0.5rem; padding-right: 0.5rem;
.py-3padding-top: 0.75rem; padding-bottom: 0.75rem;
.px-3padding-left: 0.75rem; padding-right: 0.75rem;
.py-4padding-top: 1rem; padding-bottom: 1rem;
.px-4padding-left: 1rem; padding-right: 1rem;
.py-5padding-top: 1.25rem; padding-bottom: 1.25rem;
.px-5padding-left: 1.25rem; padding-right: 1.25rem;
.py-6padding-top: 1.5rem; padding-bottom: 1.5rem;
.px-6padding-left: 1.5rem; padding-right: 1.5rem;
.py-8padding-top: 2rem; padding-bottom: 2rem;
.px-8padding-left: 2rem; padding-right: 2rem;
.py-10padding-top: 2.5rem; padding-bottom: 2.5rem;
.px-10padding-left: 2.5rem; padding-right: 2.5rem;
.py-12padding-top: 3rem; padding-bottom: 3rem;
.px-12padding-left: 3rem; padding-right: 3rem;
.py-16padding-top: 4rem; padding-bottom: 4rem;
.px-16padding-left: 4rem; padding-right: 4rem;
.py-20padding-top: 5rem; padding-bottom: 5rem;
.px-20padding-left: 5rem; padding-right: 5rem;
.py-24padding-top: 6rem; padding-bottom: 6rem;
.px-24padding-left: 6rem; padding-right: 6rem;
.py-32padding-top: 8rem; padding-bottom: 8rem;
.px-32padding-left: 8rem; padding-right: 8rem;
.py-40padding-top: 10rem; padding-bottom: 10rem;
.px-40padding-left: 10rem; padding-right: 10rem;
.py-48padding-top: 12rem; padding-bottom: 12rem;
.px-48padding-left: 12rem; padding-right: 12rem;
.py-56padding-top: 14rem; padding-bottom: 14rem;
.px-56padding-left: 14rem; padding-right: 14rem;
.py-64padding-top: 16rem; padding-bottom: 16rem;
.px-64padding-left: 16rem; padding-right: 16rem;
.py-pxpadding-top: 1px; padding-bottom: 1px;
.px-pxpadding-left: 1px; padding-right: 1px;
.pt-0padding-top: 0;
.pr-0padding-right: 0;
.pb-0padding-bottom: 0;
.pl-0padding-left: 0;
.pt-1padding-top: 0.25rem;
.pr-1padding-right: 0.25rem;
.pb-1padding-bottom: 0.25rem;
.pl-1padding-left: 0.25rem;
.pt-2padding-top: 0.5rem;
.pr-2padding-right: 0.5rem;
.pb-2padding-bottom: 0.5rem;
.pl-2padding-left: 0.5rem;
.pt-3padding-top: 0.75rem;
.pr-3padding-right: 0.75rem;
.pb-3padding-bottom: 0.75rem;
.pl-3padding-left: 0.75rem;
.pt-4padding-top: 1rem;
.pr-4padding-right: 1rem;
.pb-4padding-bottom: 1rem;
.pl-4padding-left: 1rem;
.pt-5padding-top: 1.25rem;
.pr-5padding-right: 1.25rem;
.pb-5padding-bottom: 1.25rem;
.pl-5padding-left: 1.25rem;
.pt-6padding-top: 1.5rem;
.pr-6padding-right: 1.5rem;
.pb-6padding-bottom: 1.5rem;
.pl-6padding-left: 1.5rem;
.pt-8padding-top: 2rem;
.pr-8padding-right: 2rem;
.pb-8padding-bottom: 2rem;
.pl-8padding-left: 2rem;
.pt-10padding-top: 2.5rem;
.pr-10padding-right: 2.5rem;
.pb-10padding-bottom: 2.5rem;
.pl-10padding-left: 2.5rem;
.pt-12padding-top: 3rem;
.pr-12padding-right: 3rem;
.pb-12padding-bottom: 3rem;
.pl-12padding-left: 3rem;
.pt-16padding-top: 4rem;
.pr-16padding-right: 4rem;
.pb-16padding-bottom: 4rem;
.pl-16padding-left: 4rem;
.pt-20padding-top: 5rem;
.pr-20padding-right: 5rem;
.pb-20padding-bottom: 5rem;
.pl-20padding-left: 5rem;
.pt-24padding-top: 6rem;
.pr-24padding-right: 6rem;
.pb-24padding-bottom: 6rem;
.pl-24padding-left: 6rem;
.pt-32padding-top: 8rem;
.pr-32padding-right: 8rem;
.pb-32padding-bottom: 8rem;
.pl-32padding-left: 8rem;
.pt-40padding-top: 10rem;
.pr-40padding-right: 10rem;
.pb-40padding-bottom: 10rem;
.pl-40padding-left: 10rem;
.pt-48padding-top: 12rem;
.pr-48padding-right: 12rem;
.pb-48padding-bottom: 12rem;
.pl-48padding-left: 12rem;
.pt-56padding-top: 14rem;
.pr-56padding-right: 14rem;
.pb-56padding-bottom: 14rem;
.pl-56padding-left: 14rem;
.pt-64padding-top: 16rem;
.pr-64padding-right: 16rem;
.pb-64padding-bottom: 16rem;
.pl-64padding-left: 16rem;
.pt-pxpadding-top: 1px;
.pr-pxpadding-right: 1px;
.pb-pxpadding-bottom: 1px;
.pl-pxpadding-left: 1px;

Add padding to a single side

p{t|r|b|l}-{size}ユーティリティを使用して、要素の片側のパディングを制御します。

たとえば、pt-6は要素の上部に1.5remのパディングを追加し、pr-4は要素の右側に1remのパディングを追加し、pb-8は要素の下部に2remのパディングを追加し、 pl-2は要素の左側に0.5remのパディングを追加します。

pt-8

Target

pr-8

Target

pb-8

Target

pl-8

Target
<div class="pt-8"><span class="bg-yellow-200">Target</span></div>
<div class="pr-8"><span class="bg-yellow-200">Target</span></div>
<div class="pb-8"><span class="bg-yellow-200">Target</span></div>
<div class="pl-8"><span class="bg-yellow-200">Target</span></div>

Add horizontal padding

px-{size}ユーティリティを使用して、要素の水平方向のパディングを制御します。

px-8

Target
<div class="px-8"><span class="bg-yellow-200">Target</span></div>

Add vertical padding

py-{size}ユーティリティを使用して、要素の垂直方向のパディングを制御します。

py-8

Target
<div class="py-8"><span class="bg-yellow-200">Target</span></div>

Add padding to all sides

p-{size}ユーティリティを使用して、要素のすべての側面のパディングを制御します。

p-8

Target
<div class="p-8"><span class="bg-yellow-200">Target</span></div>

レスポンシブ

特定のブレークポイントで要素のパディングを制御するには、既存のパディングユーティリティに{screen}:プレフィックスを追加します。 たとえば、クラスmd:py-8を要素に追加すると、中程度の画面サイズ以上でpy-8ユーティリティが適用されます。

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

<div class="pt-8 sm:pr-6 md:pb-4 lg:pl-2 xl:p-0 ...">
  <span class="bg-yellow-200">Target</span>
</div>
Target

カスタマイズ

Padding scale

デフォルトでは、Tailwindは各側面と軸に19の固定パディングユーティリティを提供します。

パディング、マージン、幅、高さのこれらの値を一度にカスタマイズする場合は、tailwind.config.jsファイルのtheme.spacingセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

パディング値のみをカスタマイズするには、tailwind.config.jsファイルのtheme.paddingセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      padding: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

デフォルトテーマのカスタマイズについてはtheme customization documentationをご覧ください。

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはpadding utilitiesのために作られます。

あなたはどのバリアントがpadding utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのpaddingプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     padding: ['responsive'],
+     padding: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしpadding utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのpadding propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     padding: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!