Currently I have this implementation in Angular using Flex Layout. But Flex Layout is no more, so I'm transitioning to tailwindcss.
Everything has been going smooth until I stumbled upon this component...
<div fxLayout="row" *ngFor=" let moneda of tipoCambio; let i=index" fxShow.xs="{{i < 2}}" fxShow.sm="{{i < 3}}" fxShow.md="{{i < 5}}" fxShow.lg="{{i < 7}}" fxShow.xl="{{i < 12}}" fxLayoutAlign="center center" class="border-left">
<button mat-button fxFlex>
<span class="bold accent">{{moneda.codMonedaFuente | uppercase}}</span><span> </span>
<span fxFlex class="font-size-dynamic">{{moneda.valor | number:'1.2-2'}}</span>
</button>
</div>
As you can see, I'm using the index of the ngFor
to validate how many items to show depending on the screen breakpoint. As tailwind is CSS only, I don't know how to bridge this gap between Ng and Tailwind.
Any ideas?