我正在做一个基于tailwind的html标签过滤器。

<div class="p-3 border-b">
    <div class="flex flex-col space-y-2 mt-2">
        <div class="flex flex-row space-x-2 text-sm" v-for="(filter,index) in filters" :key="index"> 
            <div class="w-16 text-base text-gray-700"> {{ filter.label }} </div>
            <div class=" flex flex-row space-x-5 text-gray-500 leading-6"> 
                <span class="cursor-pointer"> {{ categoryItem.name }} </span>
            </div>
        </div>                            
    </div>                            
</div> 

filters:[
    {
        name:'type',
        label:'Type',
        category:[
            {'name':'All'},
            {'name':'Animals, Plants & Land'},
            {'name':'Maintenance, Service & Repair'},
            {'name':'Management & Planning'},
            {'name':'Medical Technology'},
            {'name':'Transport'},
            {'name':'Storage, Dispatching & Delivery'},
            {'name':'Retail Sales & Customer Service'},
            {'name':'Medical Technologyy'},
            ....
        ]
    }                       
],

然而，由于类别列表的数量超过30项，实际的html页面看起来非常有线，因为标签列表水平增长，而不是打破空间成多行。

如何处理呢？