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

August 16, 2022

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 class="bg-white mt-5 rounded-tr-md rounded-tl-md">
     <!-- Filter menus -->
     <div
       v-for="filter in filterTypes"
       :key="filter.type"
       class="flex flex-row items-center px-5 py-4"
     >
       <div class="">{{ filter.type }}</div>
     </div>
     <!-- Transactions According to Pages-->
     <div></div>
   </div>

>Solution :

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

<div class="flex items-center bg-white mt-5 rounded-tr-md rounded-tl-md">
     <!-- Filter menus -->
     <div
       v-for="filter in filterTypes"
       :key="filter.type"
       class=" px-5 py-4"
     >
       <div class="">{{ filter.type }}</div>
     </div>
     <!-- Transactions According to Pages-->
     <div></div>
   </div>