List Style Position

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

    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 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.

    List Style Position - 图2

    sm

    List Style Position - 图4

    md

    List Style Position - 图6

    xl

    • Lorem ipsum dolor sit amet, consectetur adipisicing elit
    • Assumenda, quia temporibus eveniet a libero incidunt suscipit

    By default, only responsive variants are generated for list style position utilities.

    You can control which variants are generated for the list style position utilities by modifying the listStylePosition property in the section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    Disabling

    ← List Style Type