1. Tipografía
  2. list-style-position

Tipografía

list-style-position

Utilidades para controlar la posición de las viñetas y números en las listas.

ClaseEstilos
list-inside
list-style-position: inside;
list-outside
list-style-position: outside;

Ejemplos

Ejemplo básico

Utiliza utilidades como list-inside y list-outside para controlar la posición de los marcadores y la sangría del texto en una lista:

list-inside

  • 5 tazas de champiñones Porcini picados
  • 1/2 taza de aceite de oliva
  • 3 libras de apio

list-outside

  • 5 tazas de champiñones Porcini picados
  • 1/2 taza de aceite de oliva
  • 3 libras de apio
<ul class="list-inside">  <li>5 tazas de champiñones Porcini picados</li>  <!-- ... --></ul><ul class="list-outside">  <li>5 tazas de champiñones Porcini picados</li>  <!-- ... --></ul>

Diseño responsivo

Antepone a la utilidad list-style-position el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<ul class="list-outside md:list-inside ...">  <!-- ... --></ul>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas