リストスタイルタイプ

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

Class reference

Class
Properties
.list-nonelist-style-type: none;
.list-disclist-style-type: disc;
.list-decimallist-style-type: decimal;

使用方法

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

.list-disc

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-decimal

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
  2. Assumenda, quia temporibus eveniet a libero incidunt suscipit
  3. Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

.list-none (default)

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

<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>

レスポンシブ

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

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

<ul class="list-none sm:list-disc md:list-decimal lg:list-disc xl:list-none">
  <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>
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

カスタマイズ

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

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!