flex flex-row not working in array values mapped in VUE-CodePudding

I have created an array of items and mapped them in Vue but I can't make them to flex-row using Tailwind CSS maybe there is something I don't know about in tailwind css flex-row feature

<div >
     <!-- Filter menus -->
     <div
       v-for="filter in filterTypes"
       :key="filter.type"
       
     >
       <div >{{ filter.type }}</div>
     </div>
     <!-- Transactions According to Pages-->
     <div></div>
   </div>

CodePudding user response：

You should place flex to the parent element, and there's no need to flex-row since flex direction is row by default :

<div >
     <!-- Filter menus -->
    <div >
     <div
       v-for="filter in filterTypes"
       :key="filter.type"
       
     >
       <div >{{ filter.type }}</div>
     </div>
    </div>
     <!-- Transactions According to Pages-->
     <div></div>
   </div>