Tailwind v2.2.19中有序列表li用flex后前缀消失如何解决？

给<li>添加flex类后有序列表数字消失，是因为flex容器会改变元素的显示类型，覆盖了列表项默认的list-item特性，导致标记无法正常渲染。以下是两种适配Tailwind v2.2.19的解决办法：

方法一：将flex布局放在<li>内部容器（推荐） #

保持<li>的默认列表项样式，把flex类加到内部包裹item的div上，既保留数字前缀，又能实现内部元素的flex排列：

<ol class="list-decimal">
    <li>
        <div class="flex">
            <div>item1</div>
            <div>item2</div>
            <div>item3</div>
        </div>
    </li>
    <li>item</li>
    <li>item</li>
</ol>

方法二：强制<li>同时保留list-item和flex特性 #

如果必须给<li>添加flex类，可以通过list-inside让数字标记和内容处于同一布局流中，避免flex布局隐藏标记：

<ol class="list-decimal">
    <li class="flex list-decimal list-inside">
        <div>item1</div>
        <div>item2</div>
        <div>item3</div>
    </li>
    <li>item</li>
    <li>item</li>
</ol>

如果需要数字标记保持在外部（默认的list-outside效果），可以给<li>添加pl-8（或合适的内边距值），确保flex内容不会覆盖数字：

<ol class="list-decimal">
    <li class="flex list-decimal pl-8">
        <div>item1</div>
        <div>item2</div>
        <div>item3</div>
    </li>
    <li>item</li>
    <li>item</li>
</ol>

内容的提问来源于stack exchange，提问作者user16582278