Тип стилей списка

Быстрый справочник

Основное использование

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

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

<ul class="list-disc">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

<ol class="list-decimal">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ol>

<ul class="list-none">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

Условное применение

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

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

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

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