【Tailwind和訳】TYPOGRAPHY/List Style Type

この記事について

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

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

List Style Type

リストの箇条書き/番号スタイルを制御するためのユーティリティ。

クラス	プロパティ
list-none	list-style-type: none;
list-disc	list-style-type: disc;
list-decimal	list-style-type: decimal;

使用法

箇条書きまたは数値リストを作成するには、list-discおよびlist-decimalユーティリティを使用します。

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

<ol class="list-decimal">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ol>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>

レスポンシブ

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

<ul class="list-none md:list-disc">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
  <li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>

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

カスタマイズ

デフォルトでは、Tailwind は最も一般的なリストスタイルタイプのための 3 つのユーティリティを提供しています。これらを変更、追加、または削除するには、Tailwind 設定のtheme.listStyleTypeセクションを編集します。

tailwind.config.js

  module.exports = {
    theme: {
      listStyleType: {
        none: 'none',
-       disc: 'disc',
-       decimal: 'decimal',
+       square: 'square',
+       roman: 'upper-roman',
      }
    }

バリアント

デフォルトでは、list style type ユーティリティーでは、レスポンシブバリアントのみが生成されます。

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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