List Style Position

@include('_partials.class-table', [ 'rows' => [ [ '.list-inside', "list-style-position: inside;", ], [ '.list-outside', "list-style-position: outside;", ], ] ])

Usage

Control the position of the markers in a list using the list-inside and list-outside utilities.

@component('_partials.code-sample', ['class' => 'px-8'])

@slot('code')

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

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

@endslot @endcomponent

Responsive

To control the list style position of a list element at a specific breakpoint, add a {screen}: prefix to any existing list utility. For example, use .md:list-inside to apply the .list-inside 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

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