文字間隔

要素の追跡(文字間隔)を制御するためのユーティリティ。

Class reference

Class
Properties
.tracking-tighterletter-spacing: -0.05em;
.tracking-tightletter-spacing: -0.025em;
.tracking-normalletter-spacing: 0;
.tracking-wideletter-spacing: 0.025em;
.tracking-widerletter-spacing: 0.05em;
.tracking-widestletter-spacing: 0.1em;

使用方法

.tracking-{size}ユーティリティを使用して、要素の文字間隔を制御します。

.tracking-tighter

The quick brown fox jumped over the lazy dog.

.tracking-tight

The quick brown fox jumped over the lazy dog.

.tracking-normal

The quick brown fox jumped over the lazy dog.

.tracking-wide

The quick brown fox jumped over the lazy dog.

.tracking-wider

The quick brown fox jumped over the lazy dog.

.tracking-widest

The quick brown fox jumped over the lazy dog.

<p class="tracking-tighter ...">The quick brown fox ...</p>
<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>
<p class="tracking-wider ...">The quick brown fox ...</p>
<p class="tracking-widest ...">The quick brown fox ...</p>

レスポンシブ

特定のブレークポイントで要素の文字間隔を制御するには、既存の文字間隔ユーティリティに{screen}:プレフィックスを追加します。 たとえば、md:tracking-wideを使用して、中程度の画面サイズ以上でのみtracking-wideユーティリティを適用します。

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

<p class="tracking-tight sm:tracking-normal md:tracking-wide lg:tracking-normal xl:tracking-tight ...">The quick brown fox jumped over the lazy dog.</p>

The quick brown fox jumped over the lazy dog.

カスタマイズ

文字間隔

デフォルトでは、Tailwindは6つの追跡ユーティリティを提供します。 Tailwind設定のtheme.letterSpacingセクションを編集することで、これらを変更、追加、または削除できます。

  // tailwind.config.js
  module.exports = {
    theme: {
      letterSpacing: {
+       tightest: '-.075em',
        tighter: '-.05em',
-       tight: '-.025em',
        normal: '0',
-       wide: '.025em',
        wider: '.05em',
-       widest: '.1em',
+       widest: '.25em',
      }
    }
  }

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!