【Tailwind和訳】TYPOGRAPHY/Letter Spacing

この記事について

この記事は、TYPOGRAPHY/Letter Spacingの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Letter Spacing

要素のトラッキング（文字の間隔）をコントロールするためのユーティリティ。

Class	Properties
tracking-tighter	letter-spacing: -0.05em;
tracking-tight	letter-spacing: -0.025em;
tracking-normal	letter-spacing: 0em;
tracking-wide	letter-spacing: 0.025em;
tracking-wider	letter-spacing: 0.05em;
tracking-widest	letter-spacing: 0.1em;

使い方

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

<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ユーティリティーを medium スクリーンサイズ以上でのみ適用することができます。

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

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

カスタマイズ

Letter Spacing

デフォルトでは、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',
      }
    }
  }

バリアント

デフォルトでは、レスポンシブバリアントのみがトラッキングユーティリティ用に生成されます。

tailwind.config.jsファイルのvariantsセクションにあるletterSpacingプロパティを変更することで、トラッキングユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       letterSpacing: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトでトラッキングユーティリティーを使用しない場合は、設定ファイルのcorePluginsセクションでletterSpacingプロパティをfalseに設定することで、トラッキングユーティリティーを完全に無効にすることができます。

tailwind.config.js

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