List Style Type

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

    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 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 Type - 图2

    all

    sm

    md

    List Style Type - 图5

    lg

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

    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.

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

    You can control which variants are generated for the list style type utilities by modifying the listStyleType property in the variants section of your file.

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

    Disabling

    If you don’t plan to use the list style type utilities in your project, you can disable them entirely by setting the listStyleType property to false in the corePlugins section of your config file:

    ← Line Height