Listings

List Style Type

Utilities for controlling the bullet/number style of a list.

<PlaygroundWithVariants variant='disc' :variants="['none', 'disc', 'circle', 'square', 'decimal', 'zero-decimal', 'greek', 'roman', 'upper-roman', 'alpha', 'upper-alpha']" prefix='list' fixed='p-2 dark:text-white opacity-85' nested=true html="<ul class='{class}'> <li>One</li> <li>Two</li> <li>Three</li> </ul>" />

export default {
  theme: {
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
      square: 'square',
      roman: 'upper-roman',
    },
  },
}

</Customizing>

List Style Position

Utilities for controlling the position of bullets/numbers in lists.

<PlaygroundWithVariants variant='inside' :variants="['inside', 'outside']" prefix='list' fixed='p-2 dark:text-white opacity-85' nested=true appended='bg-blue-200 bg-blue-300' html="<ul class='{class} bg-blue-300'> <li class='bg-blue-200'>One</li> <li class='bg-blue-200'>Two</li> <li class='bg-blue-200'>Three</li> </ul>" />