Тип стиля списка

​Основы использования

​Установка типа стиля списка

Для создания маркированных или числовых списков используйте утилиты list-disc и list-decimal.

<ul class="list-disc">
  <li>Теперь это история о том, как моя жизнь перевернулась с ног на голову</li>
  <!-- ... -->
</ul>

<ol class="list-decimal">
  <li>Теперь это история о том, как моя жизнь перевернулась с ног на голову</li>
  <!-- ... -->
</ol>

<ul class="list-none">
  <li>Теперь это история о том, как моя жизнь перевернулась с ног на голову</li>
  <!-- ... -->
</ul>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:list-disc, чтобы применять утилиту list-disc только при hover.

<ul class="list-none hover:list-disc">
  <!-- ... -->
</ul>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:list-disc, чтобы применить утилиту list-disc только на экранах среднего размера и выше.

<ul class="list-none md:list-disc">
  <!-- ... -->
</ul>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind предоставляет три утилиты для наиболее распространенных типов стилей списков. Вы изменяете, добавляете или удаляете их, редактируя раздел theme.listStyleType Вашей конфигурации Tailwind.

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

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

Если вам нужно использовать одноразовое list-style-type, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету с использованием любого произвольного значения.

<ul class="list-[upper-roman]">
  <!-- ... -->
</ul>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.