List Style Position - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "list-style-position"; export const description = "Utilities for controlling the position of bullets and numbers in lists.";

Examples

Basic example

Use utilities like list-inside and list-outside to control the position of the markers and text indentation in a list:

<Figure> <Example> { <div className="flex flex-col gap-8 sm:flex-row"> <div className="relative"> <div className="absolute -top-8 -bottom-8 left-8 w-px bg-pink-400/40 dark:bg-pink-400/30"></div> <p className="mb-3 ml-8 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-inside</p> <ul className="list-inside list-disc rounded-xl p-4 pl-8 text-gray-900 dark:text-gray-200"> <li>5 cups chopped Porcini mushrooms</li> <li>1/2 cup of olive oil</li> <li>3lb of celery</li> </ul> </div> <div className="relative"> <div className="absolute -top-0 -bottom-8 left-8 w-px bg-pink-400/40 sm:-top-8 dark:bg-pink-400/30"></div> <p className="mb-3 ml-8 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">list-outside</p> <ul className="list-outside list-disc rounded-xl p-4 pl-8 text-gray-900 dark:text-gray-200"> <li>5 cups chopped Porcini mushrooms</li> <li>1/2 cup of olive oil</li> <li>3lb of celery</li> </ul> </div> </div> } </Example>

html

<!-- [!code classes:list-inside] -->
<ul class="list-inside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

<!-- [!code classes:list-outside] -->
<ul class="list-outside">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

</Figure>

Responsive design