list-style-type

Ejemplos

Ejemplo básico

Usa utilidades como list-disc y list-decimal para controlar el estilo de los marcadores en una lista:

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

Usando un valor personalizado

Usa la sintaxis list-[<value>] para establecer el marker basado en un valor completamente personalizado:

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

Para variables CSS, también puedes usar la sintaxis list-(<custom-property>) :

<ol class="list-(--my-marker) ...">
  <!-- ... -->
</ol>

Esto es solo un atajo para list-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad list-style-type con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.