リストスタイルポジション

リスト内の箇条書き/番号の位置を制御するためのユーティリティ。

Class reference

Class
Properties
.list-insidelist-style-position: inside;
.list-outsidelist-style-position: outside;

使用方法

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

.list-inside

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

  • 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-inside bg-gray-200 ...">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>

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

レスポンシブ

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

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

<ul class="list-inside sm:list-outside md:list-inside lg:list-outside xl:list-inside">
  <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

カスタマイズ

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!