【Tailwind和訳】TYPOGRAPHY/List Style Position

この記事について

この記事は、TYPOGRAPHY/List Style Positionの記事を和訳したものです。

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

List Style Position

リストの中の箇条書きの文字や数字の位置を制御するユーティリティーです。

Class	Properties
list-inside	list-style-position: inside;
list-outside	list-style-position: outside;

使い方

list-insideおよびlist-outsideユーティリティーを使用して、リスト内のマーカーの位置を制御します。

<ul class="list-inside bg-rose-200 ...">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>

<ul class="list-outside bg-rose-200 ...">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>

レスポンシブ

特定のブレークポイントにおけるリスト要素のリスト・スタイルの位置を制御するには、既存のリスト・ユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:list-insideを使用すると、中程度の画面サイズ以上でのみlist-insideユーティリティが適用されます。

<ul class="list-outside md:list-inside">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <!-- ... -->
</ul>

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

カスタマイズ

バリアント

デフォルトでは、リストスタイルポジションユーティリティのために、レスポンシブバリアントのみが生成されます。

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

例えば、このコンフィグはhoverとfocusのバリアントも生成します。

tailwind.config.js

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

無効化

もし、プロジェクトでリストスタイルポジションのユーティリティーを使う予定がない場合は、設定ファイルのcorePluginsセクションでlistStylePositionプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

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