List Style Type

@include('_partials.class-table', [ 'rows' => [ [ '.list-none', "list-style-type: none;", ], [ '.list-disc', "list-style-type: disc;", ], [ '.list-decimal', "list-style-type: decimal;", ], ] ])

Usage

To create bulleted or numeric lists, use the list-disc and list-decimal utilities.

@component('_partials.code-sample')

@slot('code')

• Lorem ipsum dolor sit amet, consectetur adipisicing elit
...

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
...

• Lorem ipsum dolor sit amet, consectetur adipisicing elit
...

@endslot @endcomponent

Responsive

To control the list style type of a list element at a specific breakpoint, add a {screen}: prefix to any existing list utility. For example, use .md:list-disc to apply the .list-disc utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

• Lorem ipsum dolor sit amet, consectetur adipisicing elit
• Assumenda, quia temporibus eveniet a libero incidunt suscipit
• Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

@endslot @slot('sm')

• Lorem ipsum dolor sit amet, consectetur adipisicing elit
• Assumenda, quia temporibus eveniet a libero incidunt suscipit
• Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

@endslot @slot('md')

• Lorem ipsum dolor sit amet, consectetur adipisicing elit
• Assumenda, quia temporibus eveniet a libero incidunt suscipit
• Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

@endslot @slot('lg')

• Lorem ipsum dolor sit amet, consectetur adipisicing elit
• Assumenda, quia temporibus eveniet a libero incidunt suscipit
• Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

@endslot @slot('xl')

• Lorem ipsum dolor sit amet, consectetur adipisicing elit
• Assumenda, quia temporibus eveniet a libero incidunt suscipit
• Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

@endslot @slot('code')

• Lorem ipsum dolor sit amet, consectetur adipisicing elit
• Assumenda, quia temporibus eveniet a libero incidunt suscipit
• Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

@endslot @endcomponent

Customizing

By default Tailwind provides three utilities for the most common list style types. You change, add, or remove these by editing the theme.listStyleType section of your Tailwind config.

@component('_partials.customized-config', ['key' => 'theme.listStyleType']) none: 'none',

• disc: 'disc',
• decimal: 'decimal',

• square: 'square',
• roman: 'upper-roman', @endcomponent

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'list style type', 'property' => 'listStyleType', ], 'variants' => [ 'responsive', ], ])